vue侦测数据变化
2020-04-10 本文已影响0人
李华炎
如何使用watch侦听数据变化？
如何通过计算属性computed配合watch属性来侦听数据变化？
深度侦听与单一属性侦听有什么不同？
请带着上面的疑问看该案例，该案例直接在浏览器的控制台中改变vm的data属性就可以看到对应的效果，不多说，直接运行案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监听数据变化</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el: '#app',
data: {
text: "通过控制台改变vm的属性值触发函数",
arr: [{a: "111"}, "222"],
obj: {
a: '我是字符串',
b: 5,
c: false,
d: [1,2],
e: {
options:[{a:1},{b:2}],
sel: {
titel: "66666"
}
}
},
obj2: {
name: "张三",
age: 18,
info: {
address: "深圳福田区",
phone: 13800138000,
email: {
qq: "123456@qq.com",
wx: "123456"
}
}
}
},
template: "<div>{{text}}</div>",
/**
* 1.watch 可以监听在data中定义的所有属性
* 2.watch 可以监听计算属性中定义的所有属性
*/
watch: {
/**
* 案例1：监听字符串的变化
* text的值发生变化，该回调函数都会被执行
*/
text(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 案例2：监听数组的变化 (和案例3相同，都属于深度监听)
* 1.arr的长度发生变化时，回调函数都会被执行
* 2.arr的元素的值发生变化时不会触发回调函数
*/
arr(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 案例3 (和案例2相同，都属于深度监听)
* 1.深度监听,可监听对象 或 数组的变化(长度),对象中的任意一个属性发生变化都会触发handler函数
* 2.obj对象下的d属性是个数组，只有长度发生变化时才会触发handler函数,数组元素的值发生变化不会触发函数(如vm.obj.d[0] = 5 不会触发handler函数)
* 3.newValue和oldValue的值都是对象obj本身,无法知道到底是哪一个属性发生了变化
* 4.vm.obj.a的值发生变法也会触发handler函数
* 5.总结：除了改变数组的元素的值不会触发handler函数外(改变数组长度会触发handler函数)，obj对象中的任何属性发生变化都会触发handler函数
*/
obj: {
handler(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
deep: true
},
/**
* 案例4 (和案例2、案例3相同，都属于深度监听)
* 1.info 及 info里面的任意属性发生变化都会触发(除数组的元素的值发生变化外)
*/
// 'obj2.info': {
// handler(newValue, oldValue) {
// debugger
// console.log("oldValue", oldValue);
// console.log("newValue", newValue);
// },
// deep: true
// },
/**
* 案例5 (和案例6相同，仅监听当前属性)
* 1.只有info的值 或 引用发生变化时才会触发handler函数
* 2.info里面的任何属性发生变化都不会触发handler函数
* 3.如果info的值是基本数据类型时，值发生改变就触发handler函数
* 4.如果info的值是引用类型数据时，引用发生改变就触发handler函数
* 5.总结：当deep设置为false时，只有info发生改变时才会触发handler函数(不包含子属性，值针对info)
*/
'obj2.info': {
handler(newValue, oldValue) {
debugger
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
deep: false
},
/**
* 案例6 (和案例5相同，仅监听当前属性)
* 配合计算属性computed来实现单一属性的侦听(推荐)
* 注意：先在computed中返回要监听的值
*/
onlyProperty(newValue, oldValue) {
debugger
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 监听对象中不存在的属性不会报错，但也不会被触发
*/
'obj2.node': {
handler(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
}
}
},
computed: {
onlyProperty() {
return this.obj.e;
}
}
});
</script>
</body>
</html>
