vue3.0数据响应式原理

vue3.0数据响应式原理

通过proxy配合reflect

<script>
        let user = {
            name: "梓恒",
            age: 45,
            like: "篮球",
            wife: {
                name: '小佳',
                age: 46,
                like: ['蛋糕', '奶茶', '火锅']
            }
        }
        //参数一：user    target目标对象
        //参数二：hander  处理器对象，用来监视数据和数据的操作
        const ProxyUser = new Proxy(user, {
            //获取目标对象的某一个属性
            get(target, prop) {
                console.log('get方法调用了');
                return Reflect.get(target, prop)
            },
            //修改、增加目标的属性，
            set(target, prop, val) {
                console.log('set方法调用了');
                return Reflect.set(target, prop, val)
            },
            //删除目标的属性
            deleteProperty(target, prop) {
                console.log('delete方法调用了');
                return Reflect.deleteProperty(target, prop)
            }
        })
        console.log(ProxyUser.name);
        ProxyUser.name='远方是诗'
        ProxyUser.car = 'bili'
        delete ProxyUser.wife.name
        console.log(ProxyUser);
    </script>

这里附上mdn中的参数说明链接：

链接