探讨Vue2.x的数据劫持是怎么实现的

你好，我是终身学习的阿飞。

我做了个青柠檬读书会的公众号，每天分享我的学习、读书的内容，同时也会分享我的一些学习方式和一些软件推荐。

如果您有任何问题，可以在博客下方留言，我们一起探讨。

有兴趣可以关注我的博客，我们一起进步！

---

引言

Vue3.0已经到来，使用vue两年余的我，vue2.x原理学习才姗姗来迟。所幸，虽晚，却仍未晚。

当我们使用vue的时候，我们会引入「VUE」。
我们再new Vue的时候，会传入一个data的函数，返回一个对象。
最后我们可以通过构造的这个对象获取数据。
大概的代码是这样的：

import Vue from 'vue'
let vm = new Vue({
    el: '#app',
    data () {
        return {
            msg: 'hello',
            school: {name: 'zf', age: 10},
            arr: [1, 2, 3]
        }
    }
})
// vm = vm._data 代理
console.log(vm.msg = 100)

我们今天要探讨的是，vue中是如何实现data的劫持的。

import的Vue是个什么？

当我们引入Vue之后，我们会new Vue({})

很明显，Vue中，export的是一个构造函数。

function Vue (option) {
    // option 是new的时候，传入的数据
}
export default Vue

vue的实例上，有一个$option,就是这些参数，意味着在这个构造函数中，会有一个$option的属性，挂载数据。

function Vue (option) {
    this._init(option)
}

Vue.prototype._init = function (options) {
    let vm = this
    vm.$options = options
} 

通过initState处理数据

我们创建了一个initState方法，在Vue.prototype._init的时候执行：

export function initState(vm) {
    let opts = vm.$options;
    if(opts.data) {
        initData(vm)
    }
}

initData主要做的事情是通过defineProperty来重新定义传入的data数据。

import Observer from './observer'
function initData(vm) {
    let data = vm.$options.data;
    // 这里处理data可能是一个对象，或者是一个方法
    data = vm._data = typeof data === 'function' ? data.call(vm) : data || {}
    observer(vm._data) 
}

export function observer (data) {

    if (typeof data !== 'object' || data == 'null') {
        return
    }
    return new Observer(data)
}

ok，这里又有一个新的构造函数Observer，这个Observer的构造函数，主要对传入的data数据进行逐一的遍历，然后用defineProperty来逐一重新定义。

import {observer} from './index'
export function defineReactive (data, key, value) {
    // 定义响应式的数据变化
    // 如果value也是个对象的话，就要深度观察 // 递归观察
    observer(value)
    Object.defineProperty(data, key, {
        get() {
            console.log('获取数据')
            return value
        },
        set(newValue) {
            console.log('设置数据')
            if(newValue === value) return
            value = newValue
        }
    })
}

class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        let keys = Object.keys(data)
        console.log('keys', keys)
        for (let i = 0; i < keys.length; i++) {
            let key = keys[i] // 用户传入的key
            let value = data[keys[i]] // 用户传入的值
            defineReactive(data, key, value)
        }
    }
}

export default Observer

最后，如果每一次取值的时候，都用通过vm._data.xxx来取值的时候，就会很麻烦。我们需要通过写一个proxy方法来代理一下。

function proxy (vm, source, key) {
    // 将 vm 的取值操作和赋值操作代理给vm._data 属性
    Object.defineProperty(vm, key, {
        get () {
            return vm[source][key]
        },
        set (newValue) {
            vm[source][key] = newValue
        }
    })
}
function initData(vm) {
    let data = vm.$options.data;
    data = vm._data = typeof data === 'function' ? data.call(vm) : data || {}

    for (let key in data) {
        proxy(vm, '_data', key)
    }
    observer(vm._data) 
}

至此，vue对象劫持原理就已经学习完毕了。