ref拆包

当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”。 例如， object 是顶层属性，但 object.foo 不是。

所以我们给出以下 object：

js

const object = { foo: ref(1) }

下面的表达式将不会像预期的那样工作：

template

{{ object.foo + 1 }}

渲染的结果会是一个 [object Object]1，因为 object.foo 是一个 ref 对象。我们可以通过将 foo 改成顶层属性来解决这个问题：

js

const { foo } = object

template

{{ foo + 1 }}

现在渲染结果将是 2。

对比如下：

需要注意的是，如果一个 ref 是文本插值（即一个 {{ }} 符号）计算的最终值，它也将被解包。因此下面的渲染结果将为 1：

template

{{ object.foo }}

这只是文本插值的一个方便功能，相当于 {{ object.foo.value }}。