如何使用watch偵聽(tīng)數(shù)據(jù)變化魁蒜？
如何通過(guò)計(jì)算屬性computed配合watch屬性來(lái)偵聽(tīng)數(shù)據(jù)變化？
深度偵聽(tīng)與單一屬性偵聽(tīng)有什么不同瓶堕？
請(qǐng)帶著上面的疑問(wèn)看該案例败砂，該案例直接在瀏覽器的控制臺(tái)中改變vm的data屬性就可以看到對(duì)應(yīng)的效果，不多說(shuō)世落，直接運(yùn)行案例淮腾。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>監(jiān)聽(tīng)數(shù)據(jù)變化</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: "通過(guò)控制臺(tái)改變vm的屬性值觸發(fā)函數(shù)",
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: "深圳福田區(qū)",
phone: 13800138000,
email: {
qq: "123456@qq.com",
wx: "123456"
}
}
}
},
template: "<div>{{text}}</div>",
/**
* 1.watch 可以監(jiān)聽(tīng)在data中定義的所有屬性
* 2.watch 可以監(jiān)聽(tīng)計(jì)算屬性中定義的所有屬性
*/
watch: {
/**
* 案例1：監(jiān)聽(tīng)字符串的變化
* text的值發(fā)生變化，該回調(diào)函數(shù)都會(huì)被執(zhí)行
*/
text(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 案例2：監(jiān)聽(tīng)數(shù)組的變化 (和案例3相同屉佳，都屬于深度監(jiān)聽(tīng))
* 1.arr的長(zhǎng)度發(fā)生變化時(shí)谷朝，回調(diào)函數(shù)都會(huì)被執(zhí)行
* 2.arr的元素的值發(fā)生變化時(shí)不會(huì)觸發(fā)回調(diào)函數(shù)
*/
arr(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 案例3 (和案例2相同，都屬于深度監(jiān)聽(tīng))
* 1.深度監(jiān)聽(tīng),可監(jiān)聽(tīng)對(duì)象 或 數(shù)組的變化(長(zhǎng)度),對(duì)象中的任意一個(gè)屬性發(fā)生變化都會(huì)觸發(fā)handler函數(shù)
* 2.obj對(duì)象下的d屬性是個(gè)數(shù)組武花，只有長(zhǎng)度發(fā)生變化時(shí)才會(huì)觸發(fā)handler函數(shù),數(shù)組元素的值發(fā)生變化不會(huì)觸發(fā)函數(shù)(如vm.obj.d[0] = 5 不會(huì)觸發(fā)handler函數(shù))
* 3.newValue和oldValue的值都是對(duì)象obj本身,無(wú)法知道到底是哪一個(gè)屬性發(fā)生了變化
* 4.vm.obj.a的值發(fā)生變法也會(huì)觸發(fā)handler函數(shù)
* 5.總結(jié)：除了改變數(shù)組的元素的值不會(huì)觸發(fā)handler函數(shù)外(改變數(shù)組長(zhǎng)度會(huì)觸發(fā)handler函數(shù))圆凰，obj對(duì)象中的任何屬性發(fā)生變化都會(huì)觸發(fā)handler函數(shù)
*/
obj: {
handler(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
deep: true
},
/**
* 案例4 (和案例2、案例3相同体箕，都屬于深度監(jiān)聽(tīng))
* 1.info 及 info里面的任意屬性發(fā)生變化都會(huì)觸發(fā)(除數(shù)組的元素的值發(fā)生變化外)
*/
// 'obj2.info': {
// handler(newValue, oldValue) {
// debugger
// console.log("oldValue", oldValue);
// console.log("newValue", newValue);
// },
// deep: true
// },
/**
* 案例5 (和案例6相同专钉，僅監(jiān)聽(tīng)當(dāng)前屬性)
* 1.只有info的值 或 引用發(fā)生變化時(shí)才會(huì)觸發(fā)handler函數(shù)
* 2.info里面的任何屬性發(fā)生變化都不會(huì)觸發(fā)handler函數(shù)
* 3.如果info的值是基本數(shù)據(jù)類型時(shí)，值發(fā)生改變就觸發(fā)handler函數(shù)
* 4.如果info的值是引用類型數(shù)據(jù)時(shí)累铅，引用發(fā)生改變就觸發(fā)handler函數(shù)
* 5.總結(jié)：當(dāng)deep設(shè)置為false時(shí)跃须，只有info發(fā)生改變時(shí)才會(huì)觸發(fā)handler函數(shù)(不包含子屬性，值針對(duì)info)
*/
'obj2.info': {
handler(newValue, oldValue) {
debugger
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
deep: false
},
/**
* 案例6 (和案例5相同娃兽，僅監(jiān)聽(tīng)當(dāng)前屬性)
* 配合計(jì)算屬性computed來(lái)實(shí)現(xiàn)單一屬性的偵聽(tīng)(推薦)
* 注意：先在computed中返回要監(jiān)聽(tīng)的值
*/
onlyProperty(newValue, oldValue) {
debugger
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 監(jiān)聽(tīng)對(duì)象中不存在的屬性不會(huì)報(bào)錯(cuò)菇民，但也不會(huì)被觸發(fā)
*/
'obj2.node': {
handler(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
}
}
},
computed: {
onlyProperty() {
return this.obj.e;
}
}
});
</script>
</body>
</html>
