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

IT 文章7天前更新小编

0 0 0

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

一、官方文档

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

二、自动解包的数据类型

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

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

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 }}就行。代码如下：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

<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
      }
    }
  })
}