Vue 數據劫持

　　額，因為最近都在使用 Vue ，所以也想了解一下它裏面的東西到底是如何實現的，這裏就先來說一個比較簡單的 —— Vue 配置對象裏面的 data 是如何實現數據劫持的，也就是說，為什麽通過實例對象就可以讀取或設置 data 裏面的數據呢？

　　其實，並沒有這麽“神奇”的事，數據劫持的核心就是在代理對象的身上重新定義被代理對象所有可枚舉屬性，並設置 getter 和 setter 監視著它的變化，然而實現這個核心功能就是一個方法 ： Object.defineProperty( ) ，通過該方法在實例對象上重新定義了和data對象裏面的所有屬性，然而就實現了數據劫持了。下面就來模擬 Vue 的數據劫持：

（一） 假裝定義一個 Vue 函數，讓你們 new

function Vue(options) {
        // 將配置對象保存在實例對象上
        this.$options = options
        // 將配置對象裏面的data屬性保存在實例對象上
        let data = this._data = options.data
        // 保存實例對象,其實也可以用箭頭函數~~
        let me = this
        // 遍歷data中的屬性，逐一實現數據劫持
        Object.keys(data).forEach(function
 
 (key) {
            me._proxy(key)
        })
    }

（二）定義處理數據劫持的方法

Vue.prototype = {
        // 數據劫持
        _proxy:function (key) {
            let me = this
            Object.defineProperty(me,key,{
                configurable:false, 
                enumerable:true,
                get:function
 
 proxyGetter() {
                    return me._data[key]
                },
                set:function proxySetter(value) {
                    me._data[key] = value
                }
            })
        }
    }

好了，完事了，數據劫持就能正常工作，我們就可以通過實例對象去操作 data 裏面的屬性了，這裏來檢測一下：

果然，沒毛病~~

vue 數據劫持