一、
想必大家在开发vue项目时,内置指令肯定是缺一不可的,比如:v-for、v-if等等,今天给大家讲解几个内置指令,这几个指令用完之后是提升系统性能!
二、下面一 一详细讲解一下:
1. v-once
作用:当我们在标签上使用 v-once 时,它能够使元素或者表达式只渲染一次。当首次渲染后,之后数据发生变化时 v-once 就不会进行更新,因此大家可以在不需要变化的地方进行性能优化。
原理:当组件初始化编译时会标记上 v-once,首次渲染会正常执行,后续再次渲染时看到有标记则不会进行渲染。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-once>{{msg}}</p>
<!-- msg不会改变 -->
<p>{{msg}}</p>
<input type="text" v-model="msg" name="" />
</div>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
msg: "Hello",
},
});
</script>
</body>
</html>
2.v-pre
作用:告诉 Vue.js 跳过这个元素及其所有子元素的编译过程,将其视为静态内容,不会触发 Vue.js 的编译过程。
原理:当组件初始化编译时会标记上 v-pre ,那么会直接跳过编译,直接将 HTML 插入到DOM 中。
示例:
<template>
<div class="djs-box">
<div class="topBox">
<h3>vue内置指令示例</h3>
</div>
<div class="dajianshi" id="dajianshi">
<p v-pre>这里面的desc不会被替换掉{{ desc}}</p>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import MyPlugin from "../plugin/myplug_demo.js";
Vue.use(MyPlugin);
export default {
data() {
return {
desc:'对对对!'
}
},
}
</script>
最终的页面展示是 :这里面的desc不会被替换掉{{ desc}} ,而不是 :这里面的desc不会被替换掉对对对!
注意: 要区分v-pre
和v-once
的区别,v-once
用于只渲染一次,而v-pre
是直接跳过编译。
3. v-memo
作用:主要用于优化组件的渲染方面性能,能控制达到某个条件才重新当堂组件,否则不重新渲染。 v-memo 会缓存 DOM
,只有当指定的数据发生变化时才会重新渲染,从而减少渲染次数提升性能。
原理:Vue 初始化组件时会识别是否有 v-memo 标记,如果有就把这部分vnode
缓存起来,当数据变化时会对比依赖是否变化,变化再重新渲染。
示例:
<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 来指定触发渲染的条件,但只建议在长列表或者说复杂的渲染结构才使用。