vue.js中$set與數(shù)組更新方法
由于 JavaScript 的限制，Vue 不能檢測以下變動(dòng)的數(shù)組：
當(dāng)利用索引直接設(shè)置數(shù)組的某一項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength，不會(huì)更新數(shù)組。
當(dāng)然vue中給了解決方法，就是使用 Vue.set, vm.$set(Vue.set的變種寫法)或者 splice，caoncat等修改數(shù)組，同時(shí)也將觸發(fā)狀態(tài)更新：
ex：
所以如果在實(shí)例創(chuàng)建后添加新的屬性到實(shí)例上，則不會(huì)觸發(fā)更新。
ps：現(xiàn)在有兩個(gè)數(shù)組，分別為arr1，arr2，如果arr1以下標(biāo)賦值改變數(shù)組，arr2以$set改變數(shù)組，結(jié)果是什么樣呢？
data:{
arr1 = ['a','b','c'];
arr2 = [‘foo','bar','baz'];
}
vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');
根據(jù)開始我們說的根據(jù)下標(biāo)索引改變數(shù)組不能觸發(fā)狀態(tài)更新，我們會(huì)知道：第一個(gè)數(shù)組的第二項(xiàng)改變不會(huì)在頁面更新，只有第二個(gè)數(shù)組的更改會(huì)在頁面更新。然而結(jié)果卻是：
arr1 = ['a', 'alpha', 'b', 'c']; arr2 = [‘foo', 'alpha', 'bar','baz'];
兩個(gè)數(shù)組的值都更新了，也就是說，arr2用$set()方法更新時(shí)，頁面會(huì)全部更新一遍。
以上這篇vue.js中$set與數(shù)組更新方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計(jì)算屬性。下面這篇文章主要給大家介紹了Vue.js中的計(jì)算屬性,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要Vue 處理表單input單行文本框的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue開發(fā)runtime core中的虛擬節(jié)點(diǎn)示例詳解
這篇文章主要為大家介紹了vue開發(fā)runtime core中的虛擬節(jié)點(diǎn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3.2中setup語法糖的具體使用方法，文中的示例代碼講解詳細(xì)，對我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2023-02-02
這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue.js中npm安裝教程圖解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中的h函數(shù)使用及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04