Vue 中 v-pre、v-once、v-cloak 标签的深度解析与案例展示
目录
v-pre
当使用 v-pre 指令时，不会进行编译操作。所有的 Vue 模板语法都将得以完整保留，并会按照其初始的形态进行渲染。其中，最为常见的应用场景便是用于展示原始的双大括号标签及其包含的内容。
示例代码如下：
<body>
<div id="app">
<p v-pre>{
{msg}}</p>
<p>{
{msg}}</p>
</div>
</body>
<script>
const {createApp}=Vue;
const app=createApp({
data(){
return{
msg:'v-pre'
}
}
})
app.mount('#app');
</script> 分析：<p v-pre>{ {msg}}</p> 中运用了 v-pre 指令。这表明此元素及其内部的内容 { {msg}} 不会被 Vue 编译器解析，也不会进行数据绑定，而是会原原本本地呈现在页面上。
最终在页面上所显示的文字将会是“{ {msg}}” ，并非将 { {msg}} 替换为 data 中相对应的属性值“v-pre”。
运行结果，如下：
| { {msg}} v-pre |
v-once
使指定的元素或组件只渲染一次，在首次完成动态渲染后，便被视作静态内容，此后数据的变更不会导致 v-once 所在结构的更新。即便数据有所变化，它也不会被重新渲染。
该指令无需表达式，能够应用于任何元素或组件，涵盖元素或组件的全部子节点。
使用场景：适用于部分在初始化渲染完成后不再需要变动的元素或组件，诸如一些静态的展示内容。运用 v-once 能够规避不必要的重复渲染操作，进而对性能进行优化。
原文地址：https://blog.csdn.net/chinayun_6401/article/details/140350415
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！