watch 來監(jiān)聽數(shù)據(jù)變化的時(shí)候通常只使用過其中的 handler 回調(diào)，其實(shí)其還有兩個(gè)參數(shù)，便是：

• deep 設(shè)置為 true 用于監(jiān)聽對(duì)象內(nèi)部值的變化

• immediate 設(shè)置為 true 將立即以表達(dá)式的當(dāng)前值觸發(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 對(duì)象中 a 屬性的值，我們可以觸發(fā)其 watch 中的 handler 回調(diào)輸出新的對(duì)象，而如果不加 deep: true，我們只能監(jiān)聽 obj 的改變，并不會(huì)觸發(fā)回調(diào)。同時(shí)我們也添加了 immediate: true 配置，其會(huì)立即以 obj 的當(dāng)前值觸發(fā)回調(diào)

在 Vue 源碼中，主要使用了 Object.defineProperty (obj, key, option) 方法來實(shí)現(xiàn)數(shù)據(jù)的監(jiān)聽，同時(shí)其也是 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(); // 實(shí)例化

app.result; // 你訪問了 result
app.result = 11; // 你設(shè)置了 result = 11

我們通過實(shí)例化了 Observer 方法來實(shí)現(xiàn)了一個(gè)簡單的監(jiān)聽數(shù)據(jù)訪問與變化的功能。Object.defineProperty 是 ES5 的語法，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的主要原因。