数据更新,视图没有更新问题

170 阅读1分钟

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.set不生效时可以用this.set不生效时可以用 ` this.delete(this.items, 0, art),` 先把属性删掉再使用this.$set

2.$nextTick

this.$nextTick(() => {}); nextTick是在下次DOM更新循环结束之后执⾏延迟回调,在修改数据之后使⽤nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调,在修改数据之后使⽤ 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 }

5最好的办法就是别嵌套的太深,之后单独把数组提出来