Vue關于對象直接賦值的坑及解決
Vue對象直接賦值的坑
受JavaScript的限制，Vue不能監(jiān)聽到對象屬性的添加或刪除。如果這樣做了，你會發(fā)現(xiàn)添加或刪除的屬性不是響應式的，即無法及時更新視圖。
如果我們需要將a對象賦值給b對象時，要么把b對象的所有屬性都在a對象中定義一下，要么 使用this.$set(this.object,key,value)將b對象中有a對象中沒有的屬性set進去，或者使用Object.assign(this.a,this.b) 將所有可枚舉屬性的值從b對象復制到a對象并返回a對象。（如果有同名屬性的話，b屬性的值會覆蓋a屬性的值）
注意：目前IE瀏覽器不兼容Object.assign()，如果需要兼容IE的話最好不要直接使用這個方法。
比如，我們在頁面上綁定了一個dataForm.userIds
但我們并沒有在data中對dataForm.userIds進行初始化的話，
即使我們在頁面created的時候給它賦值了， 賦值是能賦進去的
但這個userIds屬性仍然不是響應式的，他的值改變不會觸發(fā)視圖的渲染
我們可以這樣做來避免這個問題：
初始化userIds屬性
或 使用this.$set(this.object,key,value)添加對象的userIds屬性，這時候添加的屬性是響應式的。
Vue對象的賦值Object.assign({}, row)
復制功能，想單獨去掉id不傳過去，思路設置局部變量，把整個row對象賦值給newData變量，使用 Object.assign({}, row)；使用delete方法刪除newData中的id
copyStep(index,row){
? ? ? ? // 將對象賦值給一個變量
? ? ? ? let newData = Object.assign({}, row)
? ? ? ? delete newData.id
? ? ? ? 將處理完的變量傳給下面的兩個方法
? ? ? ? this.addStep(index,newData);
? ? ? ? this.showEditDialog(index + 1,newData,true);
? ? ? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0結(jié)合Element-ui實戰(zhàn)案例
這篇文章主要介紹了vue2.0結(jié)合Element-ui實戰(zhàn)案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了tauri和vue通信的問題解決方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)計算器的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了讓ChatGPT解讀Vue3源碼過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue部署包可配置后臺接口地址的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue keepAlive緩存清除問題案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
vue中@click和@click.native.prevent的區(qū)別
這篇文章主要介紹了vue中@click和@click.native.prevent的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了詳解從新建vue項目到引入組件Element的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue中有一個很神奇的東西叫v-model，它可以完成我們的需求。，本文重點給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下2019-08-08