vue中性能优化的指令

v-once

能执行一次性地插值，当数据改变时，插值处的内容不会更新。

下面这段代码会随着定时器的执行，插值内容会发生变化

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

const count = ref(0)

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

<template>
  <span>使它从不更新: {{ count }}</span>
</template>

但是通过v-once修饰后，插值不会发生变化

<script setup>
import { ref } from 'vue';

const count = ref(0);

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

<template>
  <span v-once>Make it never change: {{ count }}</span>
</template>

发现第一个值一直不变，第二个值随着输入框输入值的变化不断变化，
如果进入页面后，展示的信息不会再做更改，
可以使用v-once，使用了v-once的元素/组件及其所有的子节点，
只会渲染一次，后面的渲染都会被当作静态内容跳过，可以优化性能。