reactive

reactive 创建一个深层的对象的响应式代理，即对象根属性以及嵌套对象的属性都是响应式的。

之所以嵌套对象也是响应式的，是因为对于嵌套对象，将递归地转换为响应式。结构赋值结构了第一层的属性，那么第一层属性就了失去响应式，但其嵌套下的对象还是响应式的。

// 解构赋值
const { foo, bar } = { ...reactive({ foo: 1, bar: { val: 1 } }) };

<div>foo: {{ foo }}</div>
<button @click="foo++">Change foo</button>
<div>bar val: {{ bar.val }}</div>
<button @click="bar.val++">Click bar val</button>

如上图所示，foo 只有在 bar.val 响应式更新之后才更新。被解构赋值之后，foo 失去了响应式；bar 是嵌套对象，其属性还是响应式的。

关于深层次和浅层次响应式的知识点请阅读：谈谈 Vue shallowRef 和 shallowReactive

toRef

toRef 是基于响应式对象上的一个属性，创建一个对应的 ref。这里有非常重要的注意点，“响应式”、“对象”。toRef 操作的是一个响应式数据，且数据类型是对象，而不是一个普通对象，即便控制台不报错，也会失去它的意义。

const obj = {
  foo: {
    bar: 1
  }
};
const state = toRef(obj, "foo");
function change() {
  state.value.bar++;
  console.log(state.value.bar, obj.foo.bar);
}

<div>obj: {{ obj.foo.bar }}</div>
<div>foo: {{ state.bar }}</div>
<button @click="change">Change foo bar</button>

如下图所示，页面不发生更新：

但 state 确实是 Ref 类型：

也就是说，toRef 操作的数据不能是普通对象的属性。

toRef 作用是什么？

延续响应式能力

下面是官方文档给出的示例，左看右看、上看下看都没看出个啥特别的。谜语人吧这是？

const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')
// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2
// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

❓那么 toRef 有什么用呢？前面说到 reactive 被解构赋值之后第一层（根属性）失去了响应式，而 toRef 可以让其继续保持响应式。

toRef 当作 ref 函数创建一个响应式数据不是响应式的，页面不更新，前面图2 中已经说明了。toRef 是延续响应式能力，不是创建响应式数据。

对第一节中的例子进行修改：

// 在 reactive 中包裹了 toRefs
const { foo, bar } = { ...toRefs(reactive({ foo: 1, bar: { val: 1 } })) };

图4 与 图1 进行对比，foo 确确实实是响应式的，页面也发生了变化。不再因为 bar.val 更新而更新。

toRef 与 toRefs 的区别就是多了一个 s，即批量延续 reactive 的响应式能力。

转换 prop 为 Ref 类型

官方文档中有提到关于 prop 与 toRef 结合使用的案例，说非常有用。有些函数需要的参数类型就是 Ref，比如 useRefHistory，就需要传递 Ref 类型的数据：

组件 prop 不是一个 Ref 类型的数据：

console.log(isRef(props.foo)); // => false

因此，用 toRef 转换类型，与原始数据保持同步：

useRefHistory(toRef(props, "foo"));

总结

toRef 是延续响应式，不是创建响应式数据，不能等同于 ref 函数。为何是延续响应式，需要查阅源码方可知晓。本博客只是从表现中得到的结论，没有从原理上进行总结，属于经验之谈。

toRef 只能基于响应式数据进行操作，对普通的对象进行操作得到的数据不是响应式的。