Vue3.0中的响应式原理

Vue3.0中的响应式原理

一、Vue2.x的响应式

1、实现原理：

对象类型：

通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

数组类型：

通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

Object.defineProperty(data,'count',{
	get () {},
	set () {}
})

存在问题：

新增属性、删除属性，界面不会更新。
直接通过下标修改数组，界面不会自动更新。

二、Vue3.0的响应式

实现原理：

• 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
• 通过Reflect(反射)：对源对象的属性进行操作。

new Proxy(data, {
            //拦截读取属性值
            get(target, prop) {
                // return target[prop]
                return Reflect.get(target, prop)
            },
            //拦截设置属性值或添加新属性
            set(target, prop, value) {
                // target[prop] = value
                Reflect.set(target.prop.value)
            },
            //拦截删除属性
            deleteProperty(target, prop) {
                // return delete target[prop]
                return Reflect.deleteProperty(target.prop)
            }
        })
        proxy.name = 'tom'