1. 使用watch,先指定一个要监控的数据,调用 handler(newValue,oldValue){}
2. 不设置 immediate: true 默认第一次是不触发的(从无到有的过程) ,默认为false
3. 当监控的数据是对象或者数组的引用数据类型,那么修改某个属性是监控不到的,需要当整个对象或数组发生改变才能监控到
4. 设置 deep:true 实现深度监控,不写的话改变某一个属性则监控不到,对象认为你没有改变
设置了就可以监控到,但是 newValue和oldValue是一样的,当改变整个对象newValue和oldValue才会不一样
5. watch 既可以是函数模式,也可以是对象模式
6.使用 vm.$watch 也可以实现监控,但不能实现深度监控和立即监控,建议写成对象形式
第一个参数是监控对象,第二个是函数
vm.$watch("lastName",function(newValue,oldValue){
console.log("lastName",newValue,oldValue)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计算属性和监视的使用和区别</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName" /> <br />
名:<input type="text" v-model="lastName" />
<!-- TODO:监控数据 -->
{{ fullName2 }}
<br>
<!-- ! v-model可以对嵌套的对象属性也实现双向数据绑定操作 -->
{{ userObj.name }}
<br>
{{ userObj }}
<br>
<input type="text" v-model="userObj.name">
</div>
<script>
Vue.config.productionTip = false;
let vm = new Vue({
el: '#root',
data: {
// 我们想对firstName进行监控,但是呢,vue将firstName初始化成china这个数据是需要一个过程的,原来从undefined我们将它赋值成china
firstName: 'china',
lastName: 'vane',
fullName2:'',
userObj:{
name:"lisi",
sex:"男"
}
},
// watch:监控
watch:{
// firstName数据类型是字符串
firstName:{
// 1.watch是根据被监控的内容改变而触发的
// 2.如果不进行指定的设置,默认第一次是不触发的(从无到有的过程)
// 3.利用 immediate: true,可以实现对数据进行立即的监控操作,默认为false
handler(newValue,oldValue){
// 初始化时没有值
// 第一次为 china undefined
console.log(newValue,oldValue)
this.fullName2=this.firstName+"-"+newValue // china-china
},
immediate: true // 默认为false
},
userObj:{
// userObj的数据类型是对象,我们在监控的是整个对象,但改变的不是整个,而仅仅是对象中的某个属性而已,所以整个对象它并不知道我已经改变了
handler(newValue,oldValue){
console.log(newValue,oldValue)
console.log("实现userObj.name的数据变化监控")
},
immediate: true,
deep:true // 深度监控,默认为false
}
}
});
console.log(vm)
// $watch是存在于vm实例的 prototype原型链上的,它是函数类型,所以我们可以直接通过 vm.$watch进行函数的调用
// watch 既可以是函数模式,也可以是对象模式
// 监控数据,函数监控第一次是不触发的,如果想要第一次就触发,建议写成对象形式,并且设置immediate: true
vm.$watch("lastName",function(newValue,oldValue){
console.log("lastName",newValue,oldValue)
})
</script>
</body>
</html>