解决vue filter中调用sort 无限循环问题

一 初始代码

1.mock创建随机数据

2.调用mock数据并赋值给vue data中的list 

3.html

二 发现问题

1. 发现mock生成的数据是随机的 数字大小没有排序

2 .在 vue filter中调用sort 对呈现的数据进行处理

3. 报错:

vue中渲染数据可能有一个无限更新循环--You may have an infinite update loop in a component render function.

4. 问题原因:

vue的响应式原理中对于数组的更新检测包含了一组观察数组的编译方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

而在filter中调用以上的方法就会导致无限的更新循环

5.解决方法:

 在获取数据 渲染呈现之前调用sort

三 问题核心

vue的响应式原理

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,394评论 0 25
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,280评论 0 25
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,258评论 0 6
  • 1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实...
    王童孟阅读 1,037评论 0 2
  • vue.js是什么 是一套构建用户界面的渐进式框架 vue应用组成 一个 Vue 应用由一个通过new Vue创建...
    多多酱_DuoDuo_阅读 1,045评论 0 2