vue 數據劫持

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 裏面的屬性了，這裏來檢測一下：

果真，沒毛病~~