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)

        })

    }

}