vue.js中$set與數(shù)組更新方法
由于 JavaScript 的限制，Vue 不能檢測以下變動的數(shù)組：
當(dāng)利用索引直接設(shè)置數(shù)組的某一項時，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時，例如：vm.items.length = newLength，不會更新數(shù)組。
當(dāng)然vue中給了解決方法，就是使用 Vue.set, vm.$set(Vue.set的變種寫法)或者 splice，caoncat等修改數(shù)組，同時也將觸發(fā)狀態(tài)更新：
ex：
所以如果在實例創(chuàng)建后添加新的屬性到實例上，則不會觸發(fā)更新。
ps：現(xiàn)在有兩個數(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)更新，我們會知道：第一個數(shù)組的第二項改變不會在頁面更新，只有第二個數(shù)組的更改會在頁面更新。然而結(jié)果卻是：
arr1 = ['a', 'alpha', 'b', 'c']; arr2 = [‘foo', 'alpha', 'bar','baz'];
兩個數(shù)組的值都更新了，也就是說，arr2用$set()方法更新時，頁面會全部更新一遍。
以上這篇vue.js中$set與數(shù)組更新方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue.js應(yīng)用開發(fā)中,有時候我們需要在組件內(nèi)部引入外部JavaScript庫或腳本文件來增強組件的功能,本文將詳細(xì)探討如何在Vue.js項目中安全有效地引用外部JS文件,并提供一系列示例代碼來幫助理解這一過程,需要的朋友可以參考下2024-09-09
讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例
今天小編就為大家分享一篇讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
詳解element-ui級聯(lián)菜單（城市三級聯(lián)動菜單）和回顯問題
這篇文章主要介紹了詳解element-ui級聯(lián)菜單（城市三級聯(lián)動菜單）和回顯問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關(guān)于vue中watch和computed的區(qū)別與使用方法的相關(guān)資料，文中通過實例代碼結(jié)束的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
在Vue項目中,你可以使用路由（vue-router）來實現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vant中field組件label屬性兩端對齊問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
漏斗圖一般會借助一些第三方的庫來實現(xiàn),這些庫使用起來雖然簡單順手,但是如果要定制樣式就會不太方便,本文我們就來用vue3手?jǐn)]一個漏斗圖吧2024-11-11
vue-element-admin關(guān)閉eslint的校驗方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08