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應(yīng)用開發(fā)中,有時(shí)候我們需要在組件內(nèi)部引入外部JavaScript庫或腳本文件來增強(qiáng)組件的功能,本文將詳細(xì)探討如何在Vue.js項(xiàng)目中安全有效地引用外部JS文件,并提供一系列示例代碼來幫助理解這一過程,需要的朋友可以參考下2024-09-09
讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解element-ui級(jí)聯(lián)菜單（城市三級(jí)聯(lián)動(dòng)菜單）和回顯問題
這篇文章主要介紹了詳解element-ui級(jí)聯(lián)菜單（城市三級(jí)聯(lián)動(dòng)菜單）和回顯問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關(guān)于vue中watch和computed的區(qū)別與使用方法的相關(guān)資料，文中通過實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue項(xiàng)目中頁面跳轉(zhuǎn)傳參的方法總結(jié)
在Vue項(xiàng)目中,你可以使用路由（vue-router）來實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vant中field組件label屬性兩端對(duì)齊問題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對(duì)齊問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
使用vue3實(shí)現(xiàn)數(shù)據(jù)漏斗圖
漏斗圖一般會(huì)借助一些第三方的庫來實(shí)現(xiàn),這些庫使用起來雖然簡單順手,但是如果要定制樣式就會(huì)不太方便,本文我們就來用vue3手?jǐn)]一個(gè)漏斗圖吧2024-11-11
vue-element-admin關(guān)閉eslint的校驗(yàn)方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08