本文主要是介绍Vue内置指令v-once、v-memo和v-pre提升性能?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
Vue
的内置指令估计大家都用过不少,例如v-for
、v-if
之类的就是最常用的内置指令,但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue
内置指令可用可不用,不用的时候系统正常跑,但在对的地方用了却能提升系统性能,下面将结合示例进行详细说明。
一、v-once
作用:在标签上使用v-once
能使元素或者表达式只渲染一次。首次渲染之后,后面数据再发生变化时使用了v-once
的地方都不会更新,因此用在数据不需要变化的地方就能进行性能优化。
v-once
指令实现原理: Vue
组件初始化时会标记上v-once
,首次渲染会正常执行,后续再次渲染时如果看到有v-once
标记则跳过二次渲染。
示例代码: 直接作用在标签上,可以是普通标签也可以是图片标签,当2S
后数据变化时标签上的值不会重新渲染更新。
<template><div><span v-once>{{ message }}</span><img v-once :src="imageUrl"></img></div>
</template><script 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 }}
。
<template><div><h2>常规: {{ message }}</h2><h2 v-pre>使用v-pre后: {{ message }}</h2></div>
</template><script setup>
import { ref } from 'vue';let message = ref('您好!');
</script>
注意: 要区分v-pre
和v-once
的区别,v-once
用于只渲染一次,而v-pre
是直接跳过编译。
这个指令可能很多人没想到应用场景有那些,其实最常见的用途就是要在页面上显示
Vue
代码,如果不用v-pre
就会被编译。如下所示使用v-pre
场景效果。
<template><div><pre v-pre><template><p>{{ message }}</p></template><script setup>import { ref } from 'vue';const message = ref('Hello Vue!');</script></pre></div>
</template><script 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
的值变化才会重新渲染,否则不会重新渲染。
<template><div><ul v-memo="arr"><li v-for="(item, index) in arr" :key="index">{{ item.text }}</li></ul></div>
</template><script setup>
import { ref } from 'vue';let arr = ref([{ text: '内容1' },{ text: '内容2' },{ text: '内容3' }
]);setInterval(() => {arr.value[1].text = '修改2';
}, 2000);
</script>
注意: 用v-memo
来指定触发渲染的条件,但只建议在长列表或者说复杂的渲染结构才使用。
这篇关于Vue内置指令v-once、v-memo和v-pre提升性能?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!