美文网首页already
reactive与ref对比

reactive与ref对比

作者: 只诉温暖不言殇_cc03 | 来源:发表于2022-05-16 14:39 被阅读0次

    一、定义数据角度:

    ref定义:基本数据类型

    reactive定义:对象(或数组)数据类型

    备注:ref也可以用来定义对象和数组,它内部通过reactive转为代理对象

    示例:

    let p2 = ref({

            name: '李四',

            age: 18

        })

        console.log('p2',p2)

        let p1 = reactive({

            name: '张三',

            age: 20

        })

        console.log('p1',p1)

    从打印的结果可以看出来通过ref定义的数组实际生成了一个引用实例对象,在js中如果需要调用对象的属性值通过.value.name调用,而通过reactive定义的对象直接.name调用即可

    二、原理角度

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

    reactive通过Proxy实现响应式,并通过Reflect操作源对象内部的数据

    三、使用角度

    ref:操作数据需要通过.value,在模版中读取不需要通过.value

    reactive :  操作与读取数据均不需要通过.value

    相关文章

      网友评论

        本文标题:reactive与ref对比

        本文链接:https://www.haomeiwen.com/subject/cwgturtx.html