Vue之v-once指令

v-once 指令

只渲染元素和组件一次，可以优化更新性能，执行一次性的插值，当数据改变的时候，插值出的内容不会更新

<div id="first">
<input type="text" v-model="name"/>
    <h1 v-once>{{name}}</h1>
    <h2>{{name}}</h2>
</div>
<script>
    let vm=new Vue({
        el:"#first",
        data:{
            name:'liuneng'
        },

    })
</script>

这个指令不需要任何属性值，首次渲染之后，不再跟随着数据的改变而重新渲染，这个被渲染的块视为静态内容

比如上面这段代码 使用v-model指令 双向绑定，通过输入框中来改变data中的值 ，可以发现使用v-once指令的插值表达式的h1块，即使数据改变，页面内容也不会改变,对比的 h2块中的内容发生了改变