4.1.7　v-once

v-once指令不需要表达式。v-once指令只渲染元素和组件一次，随后的渲染，使用了此指令的元素、组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

在下面示例中，当修改input输入框的值时，使用了v-once指令的p元素，不会随之改变，而第二个p元素会随着输入框的内容而改变。

【例4.7】v-once指令（源代码\ch04\4.7.html）。

    <div id="app">
        <p v-once>内容不可改变：{{message}}</p>
        <p>内容可以改变：{{message}}</p>
        <p><input type="text" v-model = "message" name=""></p>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                 message:"洗衣机"
                }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，然后在输入框中输入“洗衣机的库存为3000台”，可以看到，添加v-once指令的p标签，并没有任何的变化，效果如图4-10所示。