watch 监听事件
可以监听data,也可以监听router
三个参数 :handler,deep,immdiate(平常的写法也是一个handler简写)
watch:{
num:{
handler(newValue,oldValue){
console.log(newValue,oldValue)
},// 数据变化时候的一个操作函数
deep:true, //是否深度监听 如果监听一个对象就需要true
immediate:false,//一打开页面是否进行监听
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="num++">num++</button>
<div>{{num}}</div>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {},
watch: {
// num: function() {
// console.log('num变化')
// },
num: {
handler(newValue, oldValue) {
console.log(newValue + '=====' + oldValue)
}, //数据变化时候的一个操作函数
deep: true, //是否深度监听 如果监听对象是一个对象 那么就需要是true
immediate: false //一打开页面是否进行监听
}
}
})
</script>
</body>
</html>