vue3知识点:reactive对比ref

27 阅读1分钟

在这里插入图片描述 @[toc]

二、常用 Composition API

问题:啥叫“组合式API”?

答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

5.reactive对比ref

  • 从定义数据角度对比:
    • ref用来定义:基本类型数据
    • reactive用来定义:对象(或数组)类型数据
    • 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象
  • 从原理角度对比:
    • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。
    • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
  • 从使用角度对比:
    • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
    • reactive定义的数据:操作数据与读取数据:均不需要.value

本人其他相关文章链接

1.《vue3第二章》常用组合式 Composition API,包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性 2.vue3知识点:setup 3.vue3知识点:ref函数 4.vue3知识点:reactive函数 5.vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式 6.vue3知识点:reactive对比ref 7.vue3知识点:计算属性与监视属性 8.vue3知识点:生命周期 9.vue3知识点:自定义hook函数 10.vue3知识点:toRef函数和toRefs函数