企业门户网站建设论文搜索推广广告
一、
想必大家在开发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 来指定触发渲染的条件，但只建议在长列表或者说复杂的渲染结构才使用。