如何使用watch偵聽數(shù)據(jù)變化？
如何通過計算屬性computed配合watch屬性來偵聽數(shù)據(jù)變化？
深度偵聽與單一屬性偵聽有什么不同？
請帶著上面的疑問看該案例，該案例直接在瀏覽器的控制臺中改變vm的data屬性就可以看到對應(yīng)的效果，不多說，直接運(yùn)行案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>監(jiān)聽數(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: "通過控制臺改變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)聽在data中定義的所有屬性
* 2.watch 可以監(jiān)聽計算屬性中定義的所有屬性
*/
watch: {
/**
* 案例1：監(jiān)聽字符串的變化
* text的值發(fā)生變化，該回調(diào)函數(shù)都會被執(zhí)行
*/
text(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 案例2：監(jiān)聽數(shù)組的變化 (和案例3相同，都屬于深度監(jiān)聽)
* 1.arr的長度發(fā)生變化時，回調(diào)函數(shù)都會被執(zhí)行
* 2.arr的元素的值發(fā)生變化時不會觸發(fā)回調(diào)函數(shù)
*/
arr(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 案例3 (和案例2相同，都屬于深度監(jiān)聽)
* 1.深度監(jiān)聽,可監(jiān)聽對象 或 數(shù)組的變化(長度),對象中的任意一個屬性發(fā)生變化都會觸發(fā)handler函數(shù)
* 2.obj對象下的d屬性是個數(shù)組，只有長度發(fā)生變化時才會觸發(fā)handler函數(shù),數(shù)組元素的值發(fā)生變化不會觸發(fā)函數(shù)(如vm.obj.d[0] = 5 不會觸發(fā)handler函數(shù))
* 3.newValue和oldValue的值都是對象obj本身,無法知道到底是哪一個屬性發(fā)生了變化
* 4.vm.obj.a的值發(fā)生變法也會觸發(fā)handler函數(shù)
* 5.總結(jié)：除了改變數(shù)組的元素的值不會觸發(fā)handler函數(shù)外(改變數(shù)組長度會觸發(fā)handler函數(shù))，obj對象中的任何屬性發(fā)生變化都會觸發(fā)handler函數(shù)
*/
obj: {
handler(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
deep: true
},
/**
* 案例4 (和案例2、案例3相同，都屬于深度監(jiān)聽)
* 1.info 及 info里面的任意屬性發(fā)生變化都會觸發(fā)(除數(shù)組的元素的值發(fā)生變化外)
*/
// 'obj2.info': {
// handler(newValue, oldValue) {
// debugger
// console.log("oldValue", oldValue);
// console.log("newValue", newValue);
// },
// deep: true
// },
/**
* 案例5 (和案例6相同，僅監(jiān)聽當(dāng)前屬性)
* 1.只有info的值 或 引用發(fā)生變化時才會觸發(fā)handler函數(shù)
* 2.info里面的任何屬性發(fā)生變化都不會觸發(fā)handler函數(shù)
* 3.如果info的值是基本數(shù)據(jù)類型時，值發(fā)生改變就觸發(fā)handler函數(shù)
* 4.如果info的值是引用類型數(shù)據(jù)時，引用發(fā)生改變就觸發(fā)handler函數(shù)
* 5.總結(jié)：當(dāng)deep設(shè)置為false時，只有info發(fā)生改變時才會觸發(fā)handler函數(shù)(不包含子屬性，值針對info)
*/
'obj2.info': {
handler(newValue, oldValue) {
debugger
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
deep: false
},
/**
* 案例6 (和案例5相同，僅監(jiān)聽當(dāng)前屬性)
* 配合計算屬性computed來實現(xiàn)單一屬性的偵聽(推薦)
* 注意：先在computed中返回要監(jiān)聽的值
*/
onlyProperty(newValue, oldValue) {
debugger
console.log("oldValue", oldValue);
console.log("newValue", newValue);
},
/**
* 監(jiān)聽對象中不存在的屬性不會報錯，但也不會被觸發(fā)
*/
'obj2.node': {
handler(newValue, oldValue) {
console.log("oldValue", oldValue);
console.log("newValue", newValue);
}
}
},
computed: {
onlyProperty() {
return this.obj.e;
}
}
});
</script>
</body>
</html>
