vue更新data值,如何重新渲染元件?

2021-09-28 13:33:19 字數 1246 閱讀 6203

一:先介紹一下vue.set()方法

注:如果從服務端返回的資料量較少,或者只有幾個字段,可以用vue的set方法,如果資料量較大,請直接看第二種情況。

官網api是這樣介紹的:

vue.set(target,key,value)

引數: target

keyvalue

返回值:設定完後的新值

用法:向響應式物件中新增乙個屬性,並確保這個新屬性同樣是響應式的,且觸發檢視更新。它必須用於向響應式物件上新增新屬性,因為 vue 無法探測普通的新增屬性 (比如 this.myobject.newproperty = 『hi』)

注意物件不能是 vue 例項,或者 vue 例項的根資料物件。

我舉個簡單的小例子,把這種用法介紹一下:

一:data中定義乙個物件:

data() 

}}

二:從服務端發起請求返回新資料物件:

person:
這時需要把這個物件實時渲染到頁面中去

三:用 vue.set()方法更新資料

如下所示:

methods: ).then(res => )

/*** 0 更新的是位置0上的資料**/

});}

}

這樣從服務端返回的新資料就實時更新到元件上了。

下面說一下第二種情況:

這種情況就是資料量較大,欄位較多的,使用vue.set()方法就有點過分了,這時我們應該怎麼做呢?

核心思想就是定義乙個臨時變數,因computed 是計算屬性,這裡面的值更細可以實時渲染元件更新頁面。

一:我們在data中定義乙個很大的臨時物件

data()  // 這時乙個很大的臨時物件,字段特別多

}}

二:我們在計算屬性中也定義乙個很大的物件

這個物件是我們在頁面中真正用到的物件

computed: 

},}

三:發起非同步請求,從服務端返回資料

methods: ).then(res => );

}}

四:頁面模板元件中使用方法

}

以上兩種情況都可以解決從服務端取到的資料不能實時更新問題,根據具體情況選擇使用!

Vue中更新data值頁面不渲染的問題

不知道大家有沒有遇到過更新vue中data的值而頁面沒有同步渲染。1.通過length修改陣列 通過索引修改陣列的值 2通過物件.屬性動態新增物件 按鈕 解決方案 1.通過length 修改陣列長度以及通過索引修改或者增加陣列的值無法動態渲染到頁面 資料中已經有了但是頁面不渲染 解決用陣列的方法pu...

更新vue的data中的元素,vue更新錯誤

解決方式 用 深拷貝 可以解決,直接對vue操作的 一級資料進行深拷貝 然後修改 錯誤方式 如果這樣更新 vue看到的資料位址根本沒有改變 this.blog entries logs index open detail this.blog entries logs index open detai...

vue系列 重置data中的值

我們提交完表單之後想要重置表單的資料,但是乙個乙個賦值又很麻煩,所以有了下面的方案。元件當前data物件 this data 元件初始化狀態下的data物件 this options.data 重置data物件到初始化狀態 object.assign this data,this options.d...