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>
相关推荐
baiduopenmap12 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish19 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull23 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i32 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_34 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun40 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜43 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html