vue3知识点：reactive对比ref

@toc

二、常用 Composition API

问题：啥叫“组合式API”？

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

5.reactive对比ref

• 从定义数据角度对比：
  • ref用来定义：<strong style="color:#DD5145">基本类型数据</strong>。
  • reactive用来定义：<strong style="color:#DD5145">对象（或数组）类型数据</strong>。
  • 备注：ref也可以用来定义<strong style="color:#DD5145">对象（或数组）类型数据</strong>, 它内部会自动通过reactive转为<strong style="color:#DD5145">代理对象</strong>。
• 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive通过使用<strong style="color:#DD5145">Proxy</strong>来实现响应式（数据劫持）, 并通过<strong style="color:#DD5145">Reflect</strong>操作<strong style="color:orange">源对象</strong>内部的数据。
• 从使用角度对比：
  • ref定义的数据：操作数据<strong style="color:#DD5145">需要</strong>.value，读取数据时模板中直接读取<strong style="color:#DD5145">不需要</strong>.value。
  • reactive定义的数据：操作数据与读取数据：<strong style="color:#DD5145">均不需要</strong>.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函数