说说 Vue.js 中的 v-once 指令

版权声明：如果喜欢，就收藏吧 O(∩_∩)O~ https://blog.csdn.net/deniro_li/article/details/84189582

被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。

html：

<div id="app">
    <div v-once>
        {{content}}
    </div>
</div>

js：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            content:'格陵兰岛冰下疑现巨大陨石坑 或与灭绝理论有关'
        }
    });

    app.content='显卡第一利器升级：AMD新卡到位';
</script>

输出结果（demo）：

格陵兰岛冰下疑现巨大陨石坑 或与灭绝理论有关

这里虽然使用了 app.content 重新设置了内容，但并没有生效，因为我们使用了 v-once 指令。

v-once 指令除了用于展示静态内容，也可能在需要进一步优化性能时用到它哦O(∩_∩)O~