vue数据劫持原理

在vue生命周期中的 created阶段,data中声明的数据,都会被getter/setter劫持并赋值到this组件实例上面,这也是在其他组件,如计算属性compute,方法methods,侦听器watch中能够直接使用this.数据而不是data.数据的原因;

原理:
利用Object.defineProperty()方法对数据进行处理:

Object.defineProperty():可以 定义新属性或修改原有的属性;
在操作vue数据之前,先来操作一个对象中的数据来进行体验:

目的是令obj中data中的数据可以直接通过obj.属性名进行读取和修改

 let obj = {
            data: {
                a: 1,
                b: 2,
                c: 3
            }
        }
        //遍历obj.data中的数据
        for (var key in obj.data) {
            let val = obj.data[key]
            //obj为要在上面定义属性的对象
            //key为要定义或修改的属性的名称
            //这里第三个参数是一个对象,在里面对val进行处理
            Object.defineProperty(obj, key, {
                //数据允许删除这个属性
                configurable: true,
                //数据允许被遍历
                enumerable: true,
                get() {
                    console.log('执行了get函数');
                    //将val return出去后,obj上面就有了val的值,键为key,也就是obj.data中的键名
                    return val
                },
                //当obj中的数据被修改之后,就会执行set函数,然后将数据修改
                set(newVal) {
                    console.log('执行了set函数', newVal);
                    val = newVal
                }
            })
        }

结果:

可以看到输入obj之后,里面的属性名a,b,c都进行了提示
数据也可以进行访问:

接下来进行数据的修改:

可以看到数据通过obj.b直接进行了修改,并且再次读取obj.b中的值时,值也变成了520;

回到Vue的数据劫持中,原理其实相同,在vue生命周期中的 created阶段,data中声明的数据,都会被getter/setter劫持并赋值到this组件实例上面;
所以可以通过vue实例对象中的this来读取或修改数据;