我们看下面的例子

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5. </head>
    7. <body>
    8.     <script type="text/javascript" src="./vue.js"> </script>
    10.     <div id="app" >
    11.         <h2 v-once>初始化的n值为 {{ n }}  </h2>
    12.         <button @click="n ++ "> 当前的n值为{{n}} </button>
    13.     </div>
    16.     <script type="text/javascript">
    17.         var vm = new Vue({
    18.             el:"#app",
    19.             data:{
    20.               n:1,
    21.             },
    22.         })
    23.     </script>
    24. </body>
    26. </html>

    当我们要显示两个值，一个是n的初始值，一个是n的现在值

    v-once所在节点在初次动态渲染后，就视为静态内容了
    以后数据的变更不会引起v-once所在结构的更新，可以用于性能优化