zoukankan      html  css  js  c++  java
  • Vue update loop 的问题

    Vue 在进行日期排序的时候在 methods 中会报错。

    我在循环的时候用了v-for 来循环组件

    <zhaocai-list v-for="(item,index) in test(zhaocaiData)" v-bind:key="item.id"
     ></zhaocai-list>
    

    methods 方法中来处理这个sortData 主要是对列表里的日期做排序 然后让列表根据时间先后来渲染

           methods: {
                test(zhaocaiData){
                    return zhaocaiData.sort((a,b)=>{
                        let timeA = a.time
                        let timeB = b.time
                        return new Date(timeB) - new Date(timeA);
                    })
                },
           }
    

    这样子处理之后前端渲染没问题,但是在console 控制台中出现了 vue warm 报警

    经过审查和网上查资料发现有以下说法:

    1. 如果用方法或者计算属性对 vm.$data 的属性进行操作,理论上可能因为修改到循环对象,诱发无限循环
    2. 如果筛选或排序会 更改原值。那么就会进行无限循环

    我的问题属于第二种,因为用sort数组进行排序会更改源数组, 但是筛选的方法比如 filter/some 就不会产生这种情况

    解决方案:这种方法放在 计算属性中处理,避免vm.$data 的深层嵌套

  • 相关阅读:
    Jetson Nano更改软件源
    树莓派开机启动VNC
    树莓派VNC复制粘贴
    数学之美-泰勒公式
    C++顺序容器
    eigen的简单用法汇总
    C++并发-同步并发
    C++ string类
    C++并发-互斥元
    Nginx常用命令
  • 原文地址:https://www.cnblogs.com/qujun/p/9565223.html
Copyright © 2011-2022 走看看