vue 内置指令-v-pre/v-memo

一、v-pre 使用了该指令的元素和子元素会被编译忽略,也就是不进行编译,其中包含的所有vue模版语法都会原样显示,作用加快vue的编译

例子:

html 复制代码
    <p v-pre>
      {{不会被编译}}
      <span v-text="msg"></span>
    </p>

运行效果:

二、v-memo vue3.2+新增命令

提高渲染能力,接收的一个数组,上次数组值和本次获取的数组值不变情况下,直接复用缓存中的进行渲染,如果数组不相同,则会重新渲染

例子:

html 复制代码
<h3>v-memo 提高性能,接收的一个数组</h3>
        <!-- 哪一行的[item.status]的值变了,对应就不会从缓存中获取渲染-->
        <!--注意v-for 中使用v-memo 时,两者都要绑定在同一个元素上,v-memo 不能用v-for内部-->
<li v-for="(item,index) in eps" :keys="item.id" v-memo="[item.status]">
     <span>{{item.id}}</span> &nbsp;
     <span>{{item.name}}</span> &nbsp;
     <span>状态{{item.status}}</span> &nbsp;
     <button @click="updateStatus(item)">更新状态</button>
</li>

运行效果:点击更新状态,渲染状态为false 的耗时为平均为18.51416015625 ms

未加v-memo="[item.status]" 耗时如下:55.84326171875 ms

总结:加了v-memo ,在大数据时,可以有效减少前段渲染耗时

完整例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 内置指令</title>
</head>
<body>
    <!--
        v-text {{}}
        v-clock
        v-html
        v-if/v-else-if/v-else
        v-for v-for="(item,index) in array"
        v-on /@
        v-bind v-bind:name="xx" :name="xx" /prop
        v-model
        - v-model.lazy 监听change事件
        - v-model.number 针对可转换为数字的字符串,进行parseFloat格式遗失加我司微信
        - v-model.trim 去除左右空格
        v-once 一次性插值
        v-pre 使用了该指令的元素和子元素会被编译忽略,也就是不进行编译,其中包含的所有vue模版语法都会原样显示
             加快vue的编译
        v-memo vue3.2+新增命令
            提高渲染能力,接收的一个数组,上次数组值和本次获取的数组值不变情况下,直接复用缓存中的进行渲染,如果数组不相同,则会重新渲染
    --> 
    <div id="app">
        {{msg}}
        <h3>v-pre</h3>
        <p v-pre>
            {{不会被编译}}
            <span v-text="msg"></span>
        </p>
        <h3>v-memo 提高性能,接收的一个数组</h3>
        <!-- 哪一行的[item.status]的值变了,对应就不会从缓存中获取渲染-->
        <!--注意v-for 中使用v-memo 时,两者都要绑定在同一个元素上,v-memo 不能用v-for内部-->
        <li v-for="(item,index) in eps" :keys="item.id" >
           <span>{{item.id}}</span> &nbsp;
           <span>{{item.name}}</span> &nbsp;
           <span>状态{{item.status}}</span> &nbsp;
           <button @click="updateStatus(item)">更新状态</button>
        </li>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script type="text/javascript">
    const {createApp} = Vue;
    const app = createApp({
        data(){
            return{
                msg:"样例",
                pa1:'111',
                pa2:'222',
                eps:Array.from({length:20000},(_,index)=>{
                    return {id:index,name: "行数"+index,status:true}
                })
            }
            
        }
        ,
        methods:{
            updateStatus(item){
                //1、请求更新状态接口
                const {id,status} = item;
                console.log("item",item)
                // alert('请求更新状态接口:'+!status);
                //2、查询最新列表数据
                this.eps=Array.from({length:20000},(_,index)=>{
                    const updateStatus=index==id?!status:true;
                    return{
                        id:index,
                        name:"行数"+index,
                        status:updateStatus
                    }
                })
                //记录开始时间
                console.time();
                // this.$nextTick 用于渲染完成后执行函数体
                this.$nextTick(()=>{
                    console.timeEnd();
                })
            }
        }
        
    }).mount("#app");
    console.log("app",app);
</script>
</html>
相关推荐
【ql君】qlexcel13 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE14 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子18 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构