【vue3-学习笔记】vue3 的一些基础知识和考点荟萃

如何理解 Composition API 和 Options API

Composition API 带来了什么？

● 更好的代码组织（options：逻辑散落在各地，composition，把相关的逻辑集中到一块儿去，可以提高代码组织能力）
● 更好的逻辑复用
● 更好的类型推导
(主要为一些大型的，复杂的项目而设计）

Composition API 和 Options API 如何选择？

● 不建议共用，会引起混乱
● 小型项目、业务逻辑简单，用 Options API
● 中大型项目、逻辑复杂，用 Composition API
总的来说，还是要看场景;

如何理解 ref toRef 和 toRefs

ref

• 生成值类型的响应式数据
• 可用于模板和 reactive
• 通过 .value 修改值

• 此外，ref 还能获取 dom 元素：

要点

ref：用 .value 修改值 （如果用模板和 reactive，就不需要用 .value）

代码规范：ref 变量，后面加个 Ref 后缀。如 ageRef 。清晰，可读性好，利于维护。

toRef

• 针对一个响应式对象（ reactive 封装的）的 prop（属性），创建一个 ref，具有响应式；
• 两者保持引用关系（一方改了，另一方也跟着改）

普通对象要实现响应式，用 reactive；reactive 的某个属性需要单独拎出来实现响应式，就用 toRef。

toRefs

• 将响应式对象（reactive 封装）转换成普通对象
• 对象的每个 prop 都是对应的 ref
• 两者保持引用关系

** ref toRef toRefs 最佳使用方式：

• 用 reactive 做对象的响应式，用 ref 做值类型的响应式
• setup 中返回 toRefs(state)，或者 toRef(state, ‘xxx’) (在模板中使用会方便点）

• ref 的变量命名都用 xxxRef （代码规范，养成良好的代码习惯）
• 合成函数返回响应式对象时，使用 toRefs

为什么需要用 ref

为何需要 ref ？

• 返回值类型，会丢失响应式；
• 如在 setup、computed、合成函数，都有可能返回值类型；
• Vue 如不定义 ref，用户将自造 ref， 反而混乱；