介绍

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

如果只想页面加载时显示一次，后续不在因为数据信息的变动而变动时，就可以采取v-once实现。

很有意思，当你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，这样就大大减小了性能开销。如：

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

但是不要过度使用这个模式，尤其是该组件在未来有可能要进行数据更新的情况下不要使用；对此，官方文档也给了相应的提示：

再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。

案例

当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-once>{{msg}}</p>
      <!-- msg不会改变 -->
      <p>{{msg}}</p>
      <input type="text" v-model="msg" name="" />
    </div>

    <script type="text/javascript">
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello",
        },
      });
    </script>
  </body>
</html>

Vue指令v-once

介绍

案例