当前位置：首页 > news >正文

你使用这几个内置指令提升性能吗？

news 来源：原创 2025/5/1 14:21:21

一、

想必大家在开发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 来指定触发渲染的条件，但只建议在长列表或者说复杂的渲染结构才使用。