Vue之对象响应式原理

什么是响应式，响应式顾名思义就是你数据发生改变了，那我视图也要做出相对应的改变，在vue中 对象的响应式核心就在于ES5 中的 Object.defineproperty 进行监听，通过访问器修改数据并调用视图修改。

在vue源码实现中，主要分为5步来完成对象响应:

    第一步初始化数据，通过initData来初始化用户传入的数据，

    第二步就是进行数据的观测，调用Observe（data）方法传递数据，

    第三步通过this.walk进行观测对象，把传入的对象进行循环遍历，

    第四步通过defineReactive函数来循环对象属性定义响应式变化，

    第五步使用Object.defineproperty进行重新定义数据

下面咱们就模拟一下对象响应式原理实现：下方附代码及图片

前三步模拟

后两步模拟

        let data = {  name: "我是谁", obj: { age: 18, sex: '男' }  }

        Observe(data)

        function Observe(data) {

            if (!data || typeof data !== 'object') {

                return new Error("不是对象不可以进")

            }

            walk(data);

        }

        function walk(obj) {

            Object.keys(obj).forEach(key => {

                defineReactive(obj, key, obj[key])

            })

        }

        function defineReactive(data, key, value) {

            Observe(value);

            Object.defineProperty(data, key, {

                enumerable: true, //可枚举（可以遍历）

                configurable: true, //可配置（比如可以删除）

                get: function Getter() {

                    console.log('get', value)

                    return value

                },

                set: function Setter(newVal) {

                    Observe(newVal)

                    if (newVal !== value) {

                        console.log('set', newVal)

                        value = newVal

                        render()

                    }

                }

            })

        }

        data.obj={ age:20, sex:'女'  }

        function render(){ console.log("通知视图更新了"); }

以上就是本人对Vue对象响应式原理的理解及认知，源码的大体流程也差不多是这样的，感兴趣的小伙伴可以去看一看源码， 还有那句话：如有不对之处及不周之处请大佬们指出，也希望对一些人有所帮助，咱们下次再会！