1. $set
this.$set(target,key,value)
target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值
this.items[0] = { message:'first',id:'4'} //此时对象的值更改了,但是视图没有更新 // let art = {message:'first',id:"4"} // this.$set(this.items,0,art) //$set 可以触发更新视图
当this.delete(this.items, 0, art),`
先把属性删掉再使用this.$set
2.$nextTick
this.$nextTick(() => {});
nextTick,则可以在回调中获取更新后的 DOM,在下次 DOM 更新循环结束之后执行延迟回调。
当数据更新了,在dom中渲染后,⾃动执⾏该函数
Vue在更新data之后并不会立即更新DOM上的数据,就是说如果我们修改了data中的数据,再马上获取DOM上的值,我们取得的是旧值,我们把获取DOM上值的操作放进$nextTick里,就可以得到更新后得数据。
什么使用? 1.created钩子进行DOM操作 2.改变data函数的数据,基于新DOM做点什么
3.this.$forceUpdate();
调用强制更新方法this.$forceUpdate()会更新视图和数据,强制触发vue的update方法。
4.Object.assign
Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。
var target = {name:'带你飞'} var source = {age:18} var result = Object.assign(target,source) console.log(result,target===result); // {name: '带你飞', age: 18} true
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
var object1 = { a: 1, b: 2, c: 3 }; var object2 = Object.assign({c: 4, d: 5}, object1); console.log(object2.c, object2.d); // 3 5 console.log(object1) // { a: 1, b: 2, c: 3 } console.log(object2) // { c: 3, d: 5, a: 1, b: 2 }