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

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

    例子：

    1.     <p v-pre>
    2.       {{不会被编译}}
    3.       <span v-text="msg">span>
    4.     p>

    运行效果：

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

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

    例子：

    1. <h3>v-memo 提高性能，接收的一个数组h3>
    2.         
    3.         
    4. <li v-for="(item,index) in eps" :keys="item.id" v-memo="[item.status]">
    5.      <span>{{item.id}}span>  
    6.      <span>{{item.name}}span>  
    7.      <span>状态{{item.status}}span>  
    8.      <button @click="updateStatus(item)">更新状态button>
    9. li>

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

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

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

    完整例子：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>vue 内置指令title>
    7. head>
    8. <body>
    9.      
    10.     <div id="app">
    11.         {{msg}}
    12.         <h3>v-preh3>
    13.         <p v-pre>
    14.             {{不会被编译}}
    15.             <span v-text="msg">span>
    16.         p>
    17.         <h3>v-memo 提高性能，接收的一个数组h3>
    18.         
    19.         
    20.         <li v-for="(item,index) in eps" :keys="item.id" >
    21.            <span>{{item.id}}span>  
    22.            <span>{{item.name}}span>  
    23.            <span>状态{{item.status}}span>  
    24.            <button @click="updateStatus(item)">更新状态button>
    25.         li>
    26.     div>
    27. body>
    28. <script src="./node_modules/vue/dist/vue.global.js">script>
    29. <script type="text/javascript">
    30.     const {createApp} = Vue;
    31.     const app = createApp({
    32.         data(){
    33.             return{
    34.                 msg:"样例",
    35.                 pa1:'111',
    36.                 pa2:'222',
    37.                 eps:Array.from({length:20000},(_,index)=>{
    38.                     return {id:index,name: "行数"+index,status:true}
    39.                 })
    40.             }
    41.             
    42.         }
    43.         ,
    44.         methods:{
    45.             updateStatus(item){
    46.                 //1、请求更新状态接口
    47.                 const {id,status} = item;
    48.                 console.log("item",item)
    49.                 // alert('请求更新状态接口：'+!status);
    50.                 //2、查询最新列表数据
    51.                 this.eps=Array.from({length:20000},(_,index)=>{
    52.                     const updateStatus=index==id?!status:true;
    53.                     return{
    54.                         id:index,
    55.                         name:"行数"+index,
    56.                         status:updateStatus
    57.                     }
    58.                 })
    59.                 //记录开始时间
    60.                 console.time();
    61.                 // this.$nextTick 用于渲染完成后执行函数体
    62.                 this.$nextTick(()=>{
    63.                     console.timeEnd();
    64.                 })
    65.             }
    66.         }
    67.         
    68.     }).mount("#app");
    69.     console.log("app",app);
    70. script>
    71. html>

  • 相关阅读:
    neo4j使用python导入数据问题
    elementUI使用el-upload上传文件写法总结及避坑，上传图片/视频到本地/服务器以及回显+删除
    [附源码]java毕业设计基于SSM高考志愿填报系统
    Vue框架总结（二、Vue计算属性与监听属性）
    flutter学习之旅(二)
    打码平台之图鉴的使用步骤
    双S曲线轨迹（详细推导）
    java: 错误: 不支持发行版本 5 java: 错误: 不支持发行版本8 java: 错误: 不支持发行版本17
    39. 组合总和
    Python 面向对象1-类、对象、属性
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/134099354