Vue中template模版的自动解构机制详解

Vue中template模版的自动解构机制能帮我们大幅提升开发效率。今天，咱们就来深入了解一下这个实用的特性。

一、官方文档

要是你想深入研究Vue的各种特性，官方文档是最好的学习资料。关于template模版自动解构机制，大家可以前往cn.vuejs.org/guide/essen… 查阅，这里面有最权威、最全面的介绍。

二、自动解包的数据类型

在Vue的template模版里，有不少数据类型都能自动解包，用起来特别方便。下面咱们就来详细看看：

ref对象：无需.value即可访问

ref对象在Vue里很常用，比如创建一个ref对象ref(1) 。在template模版中，我们可以直接使用{{ count }}来访问它的值，而在setup函数里，访问时则需要写count.value 。就像下面这段代码：

<script setup> import { ref } from 'vue' // 创建一个ref对象，初始值为0 const count = ref(0) // 在setup函数中，需要通过count.value来访问其值 console.log(count.value) </script> <template> <!-- 在template模版中，无需写count.value就能直接访问其值 --> <p>{{ count }}</p> </template>

reactive对象：保持响应式代理

reactive创建的响应式对象在template模版里也不用特殊处理。比如reactive({ name: 'Alice' }) ，在template中直接用user.name就能访问到对象里的属性。代码示例如下：

<script setup> import { reactive } from 'vue' // 创建一个reactive响应式对象 const user = reactive({ name: 'Alice' }) </script> <template> <!-- 直接通过对象名.属性名访问响应式对象的属性 --> <p>{{ user.name }}</p> </template>

普通值：直接返回使用

像字符串、数值、布尔值这些基本类型的普通值，在template模版里可以直接返回使用。例如定义一个字符串const name = 'Vue' ，在template中就可以用{{ name }}来展示它。

计算属性computed：自动访问.value

计算属性computed在template模版里也能自动解包。比如computed(() => count.value * 2) ，在setup函数里访问需要写double.value ，但在template里直接用{{ double }}就行。代码如下：

<script setup> import { computed } from 'vue' // 创建一个计算属性，值为2 * 3 const double = computed(() => 2 * 3) // 在setup函数中，需要通过double.value来访问计算属性的值 console.log(double.value) </script> <template> <!-- 在template模版中，无需写double.value就能直接访问计算属性的值 --> <p>{{ double }}</p> </template>

函数（方法）：直接调用

在Vue组件里定义的函数（方法），在template模版里可以直接调用。例如const inc = () => count.value++ ，在template里可以通过@click="inc"来触发这个函数。代码示例：

<script setup> // 定义一个函数，每次调用使count的值自增1 function greet() { console.log('Hello!') } </script> <template> <!-- 点击按钮时，调用greet函数 --> <button @click="greet">Greet</button> </template>

props：自动解包传入的属性

在接收父组件传过来的props时，Vue的template模版也会自动解包。比如在父组件里<MyComp title="hello" /> ，子组件里可以直接用{{ title }} ，不需要写成props.title 。代码如下：

<script setup> // 声明接收title这个props defineProps(['title']) </script> <template> <!-- 直接使用title，无需props.title --> <h1>{{ title }}</h1> </template>

emits/attrs/slots：通过context提供

emits、attrs和slots是通过context提供的。其中插槽slot可以直接使用，而attrs则需要通过$attrs来访问。

三、自动解包的工作原理

Vue的template模版自动解包是怎么实现的呢？其实主要经过两个关键步骤：
首先是在编译阶段，Vue的编译器会识别出各种变量。然后在运行时，Vue会用内部方法proxyRefs()来包装setup函数的返回对象。proxyRefs()的工作逻辑是：如果遇到的是ref对象，访问时会自动带上.value ；如果是其他普通对象，就直接返回。下面是简化后的proxyRefs()代码逻辑：

function proxyRefs(object) { return new Proxy(object, { get(target, key) { const val = target[key] return isRef(val) ? val.value : val }, set(target, key, value) { const oldVal = target[key] if (isRef(oldVal) &&!isRef(value)) { oldVal.value = value return true } else { target[key] = value return true } } }) }