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>
相关推荐
别拿曾经看以后~15 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死18 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试20 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人29 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人30 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR35 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香37 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969340 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter