vue3.2新增指令v-memo的使用
2022-06-05 18:07
3387 查看
v-memo的讲解
vue3.2中新增了一个性能优化的指令; 这个指令就是v-memo; v-memo:可以做性能优化,v-memo中值若不发生变化,整个子树的更新会被跳过。 <div v-memo="[valueA, valueB]"> ... </div> 当组件重新渲染的时候,如果 valueA 与 valueB 都维持不变。 那么对这个 <div> 以及它的所有子节点的更新都将被跳过。 事实上,即使是虚拟 DOM 的 VNode 创建也将被跳过,因为子树的记忆副本可以被重用。 这样一来,性能将会显著提升。
场景描述
假设后端返回来了10000条数据。 前端需要做筛选。 选出符合条件的数据进行展示。 如果没有符合条件的。则保持上次的搜索结果。
v-memo的使用
<template> <div class="home"> <input type="text" v-model="jiaoSheng"> <!-- v-memo中值若不发生变化,则不会进行更新 --> <ul v-memo="[shouldUpdate]"> <li class="licss" v-for="item in arr" :key="item"> {{ jiaoSheng }} -- {{ animalType[jiaoSheng] }} </li> </ul> </div> </template> <script lang="ts" setup> import { ref } from "@vue/reactivity" import { watch } from "@vue/runtime-core" const arr=new Array(10000) const animalType={ 'mie':'🐏', 'mo':'🐂', 'miao':'🐱', } const jiaoSheng=ref('mie') const shouldUpdate=ref(0) // 监听jiaoSheng(输入框中的值)。 // 如果数据发生变化,并且在animalType对象中存在。试图进行更新。否则试图不进行更新。 watch(()=>jiaoSheng.value,()=>{ if(Object.keys(animalType).includes(jiaoSheng.value)){ shouldUpdate.value++ } }) </script>
相关文章推荐
- vue大型电商项目尚品汇(前台篇)day04
- vue大型电商项目尚品汇(前台篇)day03
- Blazor和Vue对比学习(基础部分完结撒花):本节水文,没有知识点
- Blazor和Vue对比学习(知识点杂锦3.03):key属性/指令,组件唯一标识
- vue大型电商项目尚品汇(前台篇)day01
- vue - ElementUI
- 使用VUE+SpringBoot+EasyExcel 整合导入导出数据
- Blazor和Vue对比学习(知识点杂锦3.02):动态组件,component和DynamicComponent
- Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听
- AspNetCore开源中间件-VueRouterHistory
- Blazor和Vue对比学习(基础1.3):属性和父传子
- vue - Vue脚手架/TodoList案例
- vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)
- Vue-CLI 项目搭建
- Vue-CLI 项目搭建
- Vue 插槽
- 创建vue项目步骤、项目目录介绍、es6语法之导入导出、定义并使用组件、集成bootstrap,jQuery,elementui、与后端交互
- Vue 生命周期钩子
- Vue实战-购物车案例
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶