vue源码之双向绑定

大家可能都知道，关于Vue的双向绑定，很多人都知道，核心是 Object.defineProperty() 方法，那接下来我们就简单介绍一下！
语法：
Object.defineProperty(obj, prop, descriptor)
其中：
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

其实，简单点来说，就是通过此方法来定义一个值。
调用，使用到了 get 方法，
赋值，使用到了 set 方法。

vue 双向绑定内部核心就是利用了两个类， Dep 类和 watcher 类

每个在页面上使用了的属性、数组、对象都会有一个 Dep 类，访问属性的时候 get 方法会收集对应的 watcher

同样渲染 watcher 也会收集对应的 Dep

vue 内部实现双向绑定过程：简单来说就是初始化 data 的时候会调用 observe 方法给，data 里的属性重写 get 方法和 set 方法，到渲染真实 dom 的时，渲染 watcher 会去访问页面上使用的属性变量，给属性的 Dep 都加上渲染函数，每次修改数据时通知渲染 watcher 更新视图

打开 src/core/observer/index.js

export function observe(data) {
	// 不是对象或者数组直接 return
    if (typeof data !== 'object' || data == null) {
        return
    }
    // 这里的 data 就是创建 vue 传入的 data 属性
    return new Observe(data)
}
class Observe{
    constructor(value) {
    	//添加 Dep
        this.dep = new Dep()
        //用于数组改变了可以获取到 Dep 进行更新视图
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
        })
        //vue 对数组做了特别的处理 数组重写了一些方法
        if (Array.isArray(value)) {
            //如果是数组重写数组方法，再进行尝试监听
            value.__proto__ = arrayMethods;
            //尝试监听数组内部的属性。
            this.observeArray(value)
        } else {
        	//递归处理对象
            this.walk(value)
        }
    }
    walk(data) {
        Object.keys(data).forEach((key, index) => {
            defineProperty(data,key,data[key])
        })
    }
    observeArray(value) {
        value.forEach(item => {
            observe(item)
        })
    }
}