竹子建站免费版,html做网站心得,郑州艾特软件 网站建设,福州网站建设liedns前言
Vue的内置指令估计大家都用过不少#xff0c;例如v-for、v-if之类的就是最常用的内置指令#xff0c;但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue内置指令可用可不用#xff0c;不用的时候系统正常跑#xff0c;但在对的地方用了却能提升系统性能例如v-for、v-if之类的就是最常用的内置指令但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue内置指令可用可不用不用的时候系统正常跑但在对的地方用了却能提升系统性能下面将结合示例进行详细说明。
一、v-once
作用在标签上使用v-once能使元素或者表达式只渲染一次。首次渲染之后后面数据再发生变化时使用了v-once的地方都不会更新因此用在数据不需要变化的地方就能进行性能优化。
v-once指令实现原理 Vue组件初始化时会标记上v-once首次渲染会正常执行后续再次渲染时如果看到有v-once标记则跳过二次渲染。
示例代码 直接作用在标签上可以是普通标签也可以是图片标签当2S后数据变化时标签上的值不会重新渲染更新。
templatedivspan v-once{{ message }}/spanimg v-once :srcimageUrl/img/div
/templatescript setup
import { ref } from vue;let message ref(Vue指令!);
let imageSrc ref(/path/my/image.jpg);setTimeout(() {message.value 修改内容!;imageUrl.value /new/path/my/images.jpg;
}, 2000);/script注意 作用v-once会使属性失去响应式要确保这个地方不需要响应式更新才能使用否则会导致数据和页面视图对不上。
二、v-pre
作用 在标签上使用v-pre后Vue编译器会自动跳过这个元素的编译。使用此内置指令后会被视为静态内容。
v-pre指令实现原理 Vue初次编译时如果看到有v-pre标记那么跳过这部分的编译直接当成原始的HTML插入到DOM中。
示例代码 常规文本会正常编译成您好但使用了v-pre后会跳过编译原样输出{{ message }}。
templatedivh2常规: {{ message }}/h2h2 v-pre使用v-pre后: {{ message }}/h2/div
/templatescript setup
import { ref } from vue;let message ref(您好!);
/script注意 要区分v-pre和v-once的区别v-once用于只渲染一次而v-pre是直接跳过编译。 这个指令可能很多人没想到应用场景有那些其实最常见的用途就是要在页面上显示Vue代码如果不用v-pre就会被编译。如下所示使用v-pre场景效果。 templatedivpre v-prelt;templategt;lt;pgt;{{ message }}lt;/pgt;lt;/templategt;lt;script setupgt;import { ref } from vue;const message ref(Hello Vue!);lt;/scriptgt;/pre/div
/templatescript setup
import { ref } from vue;let message ref(您好!);
/script页面上展示 代码原始显示不会被编译。 三、v-memo支持3.2版本
作用 主要用于优化组件的渲染方面性能能控制达到某个条件才重新当堂组件否则不重新渲染。v-memo 会缓存 DOM只有当指定的数据发生变化时才会重新渲染从而减少渲染次数提升性能。
v-memo 指令实现原理 Vue初始化组件时会识别是否有v-memo标记如果有就把这部分vnode缓存起来当数据变化时会对比依赖是否变化变化再重新渲染。
示例代码 用v-memo 绑定了arr那么当arr的值变化才会重新渲染否则不会重新渲染。
templatedivul v-memoarrli v-for(item, index) in arr :keyindex{{ item.text }}/li/ul/div
/templatescript setup
import { ref } from vue;let arr ref([{ text: 内容1 },{ text: 内容2 },{ text: 内容3 }
]);setInterval(() {arr.value[1].text 修改2;
}, 2000);
/script注意 用v-memo来指定触发渲染的条件但只建议在长列表或者说复杂的渲染结构才使用。
