章
目
录
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
}
}
})
}
四、使用自动解包的注意事项
虽然自动解包很方便，但在实际使用中也有一些情况需要特别注意：
深层次ref对象
像ref({ a: 1 })这种深层次的ref对象，访问count.a时要格外小心，因为它的解构方式和普通ref对象有所不同。
复杂嵌套对象
例如ref({ user: { name: 'abc' } }) ，这里面的user并不是代理对象，在访问和修改时可能会出现一些意想不到的问题，需要手动处理。
自定义对象/类实例
自定义对象或者类实例不一定会自动解包，除非你手动去处理它们的响应式，否则在template模版里使用时可能达不到预期效果。
外部返回的对象
一些第三方库（比如axios）返回的对象，通常不会自动具备响应式，也就无法享受自动解包的便利，在使用时需要额外注意。
掌握了Vue中template模版的自动解构机制，开发过程能顺畅不少。大家赶紧动手实践起来，遇到问题可以随时回顾这篇文章。要是在使用过程中有什么新的发现，也欢迎在评论区分享交流！
