只渲染元素和组件一次。

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    11. <body>
    13.     <div id="app"></div>
    15.     <template id="my-app">
    16.     <!-- 这里的会变化 -->
    17.     <h2>{{counter}}</h2>
    19.     <!-- 这里的子元素只渲染1次，意味着不会变化 -->
    20.     <div v-once>
    21.       <h2>{{counter}}</h2>
    22.       <h2>{{message}}</h2>
    23.     </div>
    24.     <button @click="increment">+1</button>
    25.   </template>
    27.     <script src="https://unpkg.com/vue@next"></script>
    28.     <script>
    29.         const App = {
    30.             template: '#my-app',
    31.             data() {
    32.                 return {
    33.                     counter: 100,
    34.                     message: "abc"
    35.                 }
    36.             },
    37.             methods: {
    38.               // 让counter+1
    39.                 increment() {
    40.                     this.counter++;
    41.                 }
    42.             }
    43.         }
    45.         Vue.createApp(App).mount('#app');
    46.     </script>
    47. </body>
    49. </html>

    image.png