watch 來監(jiān)聽數(shù)據(jù)變化的時候通常只使用過其中的 handler 回調(diào)，其實其還有兩個參數(shù)毫目，便是：
- deep 設(shè)置為 true 用于監(jiān)聽對象內(nèi)部值的變化
- immediate 設(shè)置為 true 將立即以表達式的當前值觸發(fā)回調(diào)
<template>
<button @click="obj.a = 2">修改</button>
</template>
<script>
export default {
data() {
return {
obj: {
a: 1,
}
}
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
}
}
</script>
以上代碼我們修改了 obj 對象中 a 屬性的值蔬啡，我們可以觸發(fā)其 watch 中的 handler 回調(diào)輸出新的對象，而如果不加 deep: true镀虐，我們只能監(jiān)聽 obj 的改變箱蟆，并不會觸發(fā)回調(diào)。同時我們也添加了 immediate: true 配置刮便，其會立即以 obj 的當前值觸發(fā)回調(diào)
在 Vue 源碼中空猜，主要使用了 Object.defineProperty (obj, key, option) 方法來實現(xiàn)數(shù)據(jù)的監(jiān)聽，同時其也是 Vue 數(shù)據(jù)雙向綁定的關(guān)鍵方法之一诺核。示例代碼如下：
function Observer() {
var result = null;
Object.defineProperty(this, 'result', {
get: function() {
console.log('你訪問了 result');
return result;
},
set: function(value) {
result = value;
console.log('你設(shè)置了 result = ' + value);
}
});
}
var app = new Observer(); // 實例化
app.result; // 你訪問了 result
app.result = 11; // 你設(shè)置了 result = 11
我們通過實例化了 Observer 方法來實現(xiàn)了一個簡單的監(jiān)聽數(shù)據(jù)訪問與變化的功能抄肖。Object.defineProperty 是 ES5 的語法久信，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的主要原因窖杀。
