【学习打卡】第 10 天 Vue3(2)-原创手记-慕课网

课程名称：前端框架及项目面试聚焦 Vue3/React/Webpack
课程章节：第 6 章 Vue3 学习（新）
主讲老师：双越

课程内容：

今天学习的内容包括：
6-8 ref toRef 和 toRefs 的最佳使用方式
6-9 为什么需要用 ref
6-10 为何 ref 需要 value 属性
6-11 为什么需要 toRef 和 toRefs
主要是更深入的讲解 ref, toRef，toRefs。更能理解为何这个 API 为何如此设计。

课程收获：

大概复述一下

最佳使用方式：

用 reactive \ ref 做响应式
setup 返回 toRefs \ toRef(reac, key)
合成函数返回 toRefs

合成函数写法

function useFeatureX() {
  const state = reactive({
    x: 1,
    y: 2,
  });
  return toRefs(state);
}
export default {
  setup() {
    const { x, y } = useFeatureX();
    return {
      x,
      y,
    };
  },
};

进一步理解 ref

setup、computed、合成函数都可能需要返回响应式的值类型。proxy 只能对引用类型实现响应式。
return {…reactive({age: 20})}, age 不具备响应式。

computed 返回的是一个类似于 ref 的对象，也有 value。

ref 本身是一个对象以保证响应式，值存在 value 里。
通过对 value 属性的 get / set 实现响应式。
用于模板和 reactive 不需要 .value 是因为 vue 编译自己取了。

进一步理解 toRef、toRefs

面向 reactive 封装对象，而不是普通对象。
不丢失响应式前提下，把对象解构，拆分。
目的是为了延续响应式。

图片描述