优化性能的指令

# 题目:

首先来看到这个题目的描述，这里说的是 Vue.js 有提供了一个指令，以便只渲染一次元素和组件，并且跳过以后的更新，那么这个指令是什么呢？

# 分析:

依赖注入我们看到官方文档指令这一块下面的，v-once 这个指令，看到介绍，我们发现这个指令的作用就是仅渲染元素和组件一次，并跳过之后的更新，那不就是我们这个挑战要找的指令吗。

# 解决:

<script setup>
import { ref } from "vue"

const count = ref(0)

setInterval(() => {
  count.value++
}, 1000)
</script>

<template>
  <!-- v-once指令会渲染元素一次，然后将其从DOM中删除 -->
  <span v-once>使它从不更新: {{ count }}</span>
</template>

所以这里要解决我们的问题就使用 v-once 这个指令，它只会渲染一次也就是初始值 0，然后 setInterval 的更新就会被它跳过了。

← 依赖注入切换器→