vue 中哪些操作自动触发更新视图

vue数组对象修改触发视图更新

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

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

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

this.array.length = 2;

但是如果是直接修改数组中元素，而元素是个对象，可以直接修改对象的值来自动更新视图。如下：

3数组对象直接修改属性，可以触发视图更新this.array[0].show = true;
this.array.forEach(function(item){item.show = true;
});

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

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中获取/操作组件中的dom元素
最近刚做了一个项目,需要用到地图,选择的是腾讯地图,创建地图的时候,需要给地图创建函数中传入地图容器的id或者容器的dom元素,但是在调试过程中,发现怎么都无法获取dom元素,直接通过getEleme ...
Vue Array数组操作（变异更新、替换）
今天小编写一下Array数组操作(变异更新.替换) 来个v-for和key小补充,方便了解接下来的课程循环指令v-for补充: 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改 ...
使用jQuery中trigger()方法自动触发事件
一.常用事件在页面加载完成时自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
vue中脚手架设置自动打开浏览器打开后地址为http://0.0.0.0:8080/
1.问题描述在创建了一个vue-cli的时候,设置启动服务浏览器自动打开的时候,发生了如下图的情况 IP地址不是之前手动打开的loclhos:8080而是0.0.0.0:8080 解决方法只能将最 ...
chorme vue中使用audio自动播放问题
我这里是将audio文件放在static文件夹中,vue页面中直接引用: <audio class="audio" src="./static/audio/alar ...
Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑: 要实现的效果: 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起 ...
vue中使用vue-qrcode-reader自动检测并解码来自摄像机流的QR码
1.装包 npm install vue-qrcode-reader 2.在目标页面文件中/src/views/index.vue引入 import { QrcodeStream } from 'vu ...
vue中赋值操作深入
直接对computed的变量进行赋值,这个操作说不行的,如果需要改变computed里面变量的值,需要改变这个变量里面依赖的变量,依赖的变量值发生了改变,computed里面就能监听到变化,自然而然c ...
vue数组操作不更新视图问题
vue 观察数组的变异方法更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

vue 中哪些操作自动触发更新视图

vue 中哪些操作自动触发更新视图

vue数组对象修改触发视图更新

vue 中哪些操作自动触发更新视图相关推荐

最新文章

热门文章