vue指令v-once使用实例

v-once 是 Vue.js 中的一个指令，用于确保一个元素和它的所有子元素只渲染一次。这可以用来优化性能，特别是当你知道某个元素的内容在初次渲染后不会改变时。

下面是一个简单的 v-once 的使用示例：
 

​<template>  
  <div>  
    <p v-once>{{ message }}</p>  
    <button @click="changeMessage">改变消息</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: '这是一个不会改变的消息'  
    };  
  },  
  methods: {  
    changeMessage() {  
      this.message = '这个消息应该被改变，但由于 v-once，它不会';  
    }  
  }  
};  
</script>

在这个例子中，我们有一个段落元素 <p>，它使用了 v-once 指令，并绑定了一个动态内容 {{ message }}。我们还有一个按钮，当点击时会调用 changeMessage 方法，该方法会尝试改变 message 的值。

但是，由于 <p> 元素使用了 v-once，所以即使 message 的值在后续被改变，这个段落元素的内容也不会被更新。这就是 v-once 的作用：确保元素只渲染一次。

需要注意的是，v-once 不仅仅影响它所在的元素，还影响该元素的所有子元素。所以，如果你在一个容器元素上使用了 v-once，那么这个容器内的所有内容都只会渲染一次。