快捷導(dǎo)航

Vue關(guān)于對(duì)象直接賦值的坑及解決

更新時(shí)間：2022年09月07日 16:51:08 作者：Da_xiong0

這篇文章主要介紹了Vue關(guān)于對(duì)象直接賦值的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue對(duì)象直接賦值的坑

受JavaScript的限制，Vue不能監(jiān)聽到對(duì)象屬性的添加或刪除。如果這樣做了，你會(huì)發(fā)現(xiàn)添加或刪除的屬性不是響應(yīng)式的，即無法及時(shí)更新視圖。

如果我們需要將a對(duì)象賦值給b對(duì)象時(shí)，要么把b對(duì)象的所有屬性都在a對(duì)象中定義一下，要么使用this.$set(this.object,key,value)將b對(duì)象中有a對(duì)象中沒有的屬性set進(jìn)去，或者使用Object.assign(this.a,this.b) 將所有可枚舉屬性的值從b對(duì)象復(fù)制到a對(duì)象并返回a對(duì)象。（如果有同名屬性的話，b屬性的值會(huì)覆蓋a屬性的值）

注意：目前IE瀏覽器不兼容Object.assign()，如果需要兼容IE的話最好不要直接使用這個(gè)方法。

比如，我們?cè)陧撁嫔辖壎艘粋€(gè)dataForm.userIds

但我們并沒有在data中對(duì)dataForm.userIds進(jìn)行初始化的話，

即使我們?cè)陧撁鎐reated的時(shí)候給它賦值了，賦值是能賦進(jìn)去的

但這個(gè)userIds屬性仍然不是響應(yīng)式的，他的值改變不會(huì)觸發(fā)視圖的渲染

我們可以這樣做來避免這個(gè)問題：

初始化userIds屬性

或使用this.$set(this.object,key,value)添加對(duì)象的userIds屬性，這時(shí)候添加的屬性是響應(yīng)式的。

Vue對(duì)象的賦值Object.assign({}, row)

復(fù)制功能，想單獨(dú)去掉id不傳過去，思路設(shè)置局部變量，把整個(gè)row對(duì)象賦值給newData變量，使用 Object.assign({}, row)；使用delete方法刪除newData中的id

copyStep(index,row){
? ? ? ? // 將對(duì)象賦值給一個(gè)變量
? ? ? ? let newData = Object.assign({}, row)
? ? ? ? delete newData.id
? ? ? ? 將處理完的變量傳給下面的兩個(gè)方法
? ? ? ? this.addStep(index,newData);
? ? ? ? this.showEditDialog(index + 1,newData,true);
? ? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: