vue更新数组时触发视图更新的方法

参考原文：

vue更新数组时触发视图更新的方法 - 大橙橙 - 博客园

vue数组对象修改触发视图更新 - 看风景就 - 博客园

直接修改数组元素是无法触发视图更新的，如

this.array[0] = {name: 'meng',age: 22
}

修改array的length也无法触发视图更新，如

this.array.length = 2;

触发视图更新的方法有如下几种

1. Vue.set

可以设置对象或数组的值，通过key或数组索引，可以触发视图更新

数组修改

Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)

对象修改

Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)

2. Vue.delete

删除对象或数组中元素，通过key或数组索引，可以触发视图更新

数组修改

Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)

对象修改

Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)

3. 数组对象直接修改属性，可以触发视图更新

this.array[0].show = true;
this.array.forEach(function(item){item.show = true;
});

4. splice方法修改数组，可以触发视图更新

this.array.splice(indexOfItem, 1, newElement)

5. 数组赋值为新数组，可以触发视图更新

this.array = this.array.filter(...)
this.array = this.array.concat(...)

6. 用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新

//Object.assign的单层的覆盖前面的属性，不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})

7.Vue提供了如下的数组的变异方法，可以触发视图更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

vue更新数组时触发视图更新的方法相关推荐

vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法，熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
VUE 动态给对象增加属性，并触发视图更新。
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...
vue this.$set 给data对象新增属性，并触发视图更新
往响应式对象this.$data中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 . data () {retu ...
Vue：触发视图更新的hack
前言触发视图更新的hack,hack的是什么?hack那些数据改变却没有被vue检测到的更新!那么vue有哪些情况是检测不到数据的变动的? 官方说明的有下面两大类: 数组使用下标更新数组元素: 使 ...
vue 不能响应set结构增加数据_Vue.set()动态的新增与修改数据,触发视图更新的方法...
参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的, ...
Vue Array数组操作（变异更新、替换）
今天小编写一下Array数组操作(变异更新.替换) 来个v-for和key小补充,方便了解接下来的课程循环指令v-for补充: 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改 ...
vue中数组的七个响应式方法
vue中数组的七个响应式方法起因: 在使用vue实习中,通过数组的索引改变了数组中的值,测试时发现,更改成功了,但是试图无响应. 原因: *通过索引值修改数组元素,不是响应式方法* // 以下代 ...
Vs定义超大数组时,stack OverFlow的解决方法
定义超大数组时,stack OverFlow的解决方法,当然了这里的数组不仅仅是int,char,double等内置类型,还可以是其他的类,如CString,CButton,CMap等. stack ...
field list什么意思_从源码中学Vue(六)「解密」为什么操作数组的方法也会触发视图更新...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) 上一章节我大概分析了下在Vue中的 Watcher.Observer.Dep三者的关系,以及如何检测数 ...

vue更新数组时触发视图更新的方法

vue更新数组时触发视图更新的方法相关推荐

最新文章

热门文章