vue2.x 的数据响应式原理

vue2.x 的数据响应式原理

现在 vue 3.x 已经出来，面试常问的问题就是 vue2.x 的数据响应式原理？

1、原理

        // 开发 vue 项目的时候，都是提前把响应式数据放到了 data 配置中
        /*
         data(){
             return {
                 name:'ddg'
                 age:20
             }
         }
        */
        // 一般情况下，响应式数据都是提前写好的，并且对象的属性有很多个，一般不会只有一个
        let data = {
            name: 'ddg',
            age: 20,
            job: '正在找'
        }
        // 要求 ：  把上面的数据，变成 set get 形式
        Object.keys(data).forEach((key) => {
            // key 代表 data 的 所有属性的属性名
            console.log(key);
            console.log(data[key]);
            observe(data, key, data[key])
        })
        /**
         * @description: 循环遍历，给data中的每一个属性都加上 Object.defineProperty 
         * @param  {*} 
         * @return {*}
         * @Author: 呆呆狗
         * @Date: 2021-05-07 17:12:30
         * @LastEditTime: Do not edit
         * @LastEditors: 呆呆狗
         * @param {*} data 要处理的对象
         * @param {*} key 要处理的对象属性名
         * @param {*} value 要处理的对象属性名对应的初始值
         */
        function observe(data, key, value) {
            /* 
            1、函数定义形参相当于在内部中，声明了和形参对应的变量 并且初始化为 undefined
            2、函数调用传入实参的时候，相当于给内部声明好的变量做了赋值操作
            3、observe函数 调用完毕后，本来应该内部所有的变量都会回收，但是如果内部有其他函数，引用了 变量，则不会被回收
            4、Object.defineProperty 其实 也是 一个函数。所以变量并不会销毁，而是常驻内存
            5、由于闭包的特性，每一格传入下来的 value 都会常驻内存，相当于我们 一开始用的 中间变量，目的就是 为了  set 和 get 的联动

            */
            // let data = data
            // let key = 'name'
            // let value = 'ddg'
            Object.defineProperty(data, key, {
                set(newValue) {
                    value = newValue
                    console.log('你设置了属性  ', key);
                },
                get() {
                    console.log('你访问了属性  ', key);
                    return value
                }
            })
        }

        /* 
        1、实现数据响应式的方法有两个，一个就是 Object.defineProperty  方法 和 Proxy 对象代理
        2、vue 2.x 中，只要放到了 data 里的数据，不管层级多深，不管你用到还是用不到，都会进行递归响应式处理，，，如非必要，尽量不要添加太多的冗余数据在 data中
        3、vue3.x 解决了 数据响应式处理的无端性能消耗，使用的手段就是 Proxy 劫持对象整体 + 惰性处理（用到了 进行响应式转换）
        
        */

2、面试回答的时候注意的点

1. Object.defineProperty 方法
2. 数据劫持
3. 发布订阅者模式