Vue3 中 reactive 对比 ref

目录

从定义角度对比

从原理角度对比

从使用角度对比

---

从定义角度对比

        1.ref 用来定义：基本数据类型

        2.reactive 用来定义：对象（或数组）类型数据

        3.备注：ref 也可以用来定义对象（或数组）类型的数据，它内部会调用通过 reactive 转为代理对象

从原理角度对比

        ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式（数据劫持）

        reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect 操作源对象内部的数据，具体代码实现如下

             const p = new Proxy(person, {
            // 当有人读取 p 中的属性时调用
            get(target, propName) {
                console.log(`有人读取了p中的${propName}属性`)
                return Reflect.get(target, propName)
            },

            // 当有人修该 p 中的属性时调用，或有人给 p 中添加了属性调用
            set(target, propName, value) {
                console.log(`有人修改了p中的${propName}属性`)
                return Reflect.set(target, propName, value)
            },

            // 当有人删除了 p 中的属性
            deleteProperty(target, propName) {
                console.log(`有人删除了p中的${propName}属性`)
                return Reflect.deleteProperty(target, propName)
            }
        })

从使用角度对比

        ref 定义的数据：操作数据需要 .value，读取数据时模板中可以直接读取不需要  .value。

        reactive 定义的数据：操作数据与读取数据：均不需要  .value