vue修改data中數(shù)據(jù)

vue的data中保存一些數(shù)據(jù)，用于頁面的渲染。有的時候，當我們手動對data中的數(shù)據(jù)修改時，vue卻監(jiān)聽不到這些數(shù)據(jù)的變化，導致頁面沒有觸發(fā)新一輪的更新。

注意：出現(xiàn)以上問題的原因在于，沒有通過vue提供的方法對保存在data中的數(shù)據(jù)進行修改。強制性通過js對數(shù)據(jù)修改的那些方法，有一部分在vue中是不被認可的。

vue中修改簡單類型數(shù)據(jù)

簡單類型的數(shù)據(jù)，包括number boolean bigInt string 等

修改這類型的數(shù)據(jù)，我們可以直接賦值，vue也能監(jiān)聽到數(shù)據(jù)發(fā)生的變化，然后作出修改。

xxxx表示變量名，yyyy則是要賦值的新值。

this.$data.xxxx = yyyy
或
this.xxxx = yyyy

vue中修改數(shù)組的方法

一、變異方法（7個）:push ,shift, unshift, pop, sort, splice, reverse

這些方法在與js基本一致（推薦）

• push：此方法是在數(shù)組的后面添加新加元素，此方法改變了數(shù)組的長度

• pop：此方法在數(shù)組后面刪除最后一個元素，并返回數(shù)組，此方法改變了數(shù)組的長度

• shift：此方法在數(shù)組后面刪除第一個元素，并返回數(shù)組，此方法改變了數(shù)組的長度

• unshift：此方法是將一個或多個元素添加到數(shù)組的開頭，并返回新數(shù)組的長度
• splice：Array.splice(開始位置， 刪除的個數(shù)，替換的元素) 萬能方法，可以實現(xiàn)增刪改
• sort：該方法用于對數(shù)組進行排序

• reverse：該方法用于將數(shù)組的內容倒置

二、set方法（推薦）

this.set 這是 vue 實例調用 set 這是vue實例調用set這是vue實例調用set()方法，專門用來修改數(shù)組的

• 第一個參數(shù)，已經存在data中的數(shù)據(jù)，要被修改的數(shù)組
• 第二個參數(shù)，要修改的數(shù)組下標
• 第三個參數(shù)，要修改的數(shù)組對應下標的值

this.$set (this.selectedarr, index, option)

data() {
?? ?return {
?? ??? ?textArray: ["1","2","3"]
?? ?}
}

修改最后一個為"4"

this.$set (this.textArray, 2, "4")

三、用一個全新的數(shù)組替換原先的數(shù)組，而不是在原先數(shù)組上修改(不推薦)

data() {
?? ?return {
?? ??? ?textArray: ["1","2","3"]
?? ?}
}

修改最后一個為"4"

this.textArray = ["1","2","4"]

簡單總結一下，這三種修改數(shù)組的方法，最后一種不推薦，因為這會引起vue中整個數(shù)組數(shù)據(jù)對應的頁面重新渲染，而我們明明只想改變數(shù)組中的某一個元素。

vue中修改對象的方法

一、方法直接改（如果對象數(shù)據(jù)過于復雜，層次很深的話，不推薦）

this.obj.dengxi = 'dengxi'?

二、使用vue的實例提供的方法進行操作(推薦，vue監(jiān)聽了這個方法，做到更好的更新渲染)

this.$set(vm.obj,'dengxi','dengxi好帥')

三、通過vue構造函數(shù)提供的方法來改變(推薦，這個其實和第二種方法一樣)

Vue.set(this.obj,'dengxi','dengxi真的好帥')

關于刪除

如果想要將對象中的某一個鍵值對應的value刪掉

一、可以通過上面的三種方法,將其設置為空(推薦，粗暴簡單，但有效)

this.obj.dengxi = null

二、vue實例提供的刪除方法(推薦)

this.$delete(this.obj,'yangxi')

三、vue構造函數(shù)提供的方法(其實和第二種一樣，推薦)

Vue.delete(this.obj,'dengxi')

四、創(chuàng)建一個新對象，覆蓋之前的對象，vue仍能實現(xiàn)更新(不推薦)

this.obj = {....}

vue修改數(shù)據(jù)不生效,頁面不刷新

vue中數(shù)據(jù)類型

包括：基本類型，對象，數(shù)組

vue數(shù)據(jù)偵聽簡易理解

在vue2中，是通過Object.definedPropety()來進行數(shù)據(jù)代理。

我們配置在const vm = new Vue({})中的deta會變成 vm自身上的屬性，也會存在于vm._data中，此時data中對應的每一個屬性都會有getter和setter，數(shù)據(jù)改變后模板重新解析，就依賴于setter對數(shù)據(jù)的偵聽。

從上圖黑色部分可以看到，age是對象，hobbies是字符串數(shù)組，friends是對象數(shù)組，他們本身都有getter和setter來實現(xiàn)響應式。

1、類型為基本數(shù)據(jù)類型：

此時，該屬性在vm上有直接的getter和setter，可以直接修改

vm.name="xiaoming"

2、類型為對象

 此時對象的每個屬性都有對應個getter和setter，也可以實現(xiàn)響應式

 3、類型為數(shù)組

 在js中，想要操作數(shù)組中的某個元素，我們可能會通過索引來操作，然而，從截圖中，我們發(fā)現(xiàn)沒有對應元素索引值的getter和setter方法，因此我們再通過數(shù)組索引值修改數(shù)據(jù)，就不會觸發(fā)模板解析，從而就不會刷新頁面。

數(shù)據(jù)更新后，頁面不刷新的可能原因

1. 初始化時data中不存在該屬性

通過 vm.xxx=yyy / vm.xxx.yyy="abc"方式添加，該屬性為非響應式。想要添加響應式數(shù)據(jù)，需要借助vue提供的set方法：

Vue.set(vm.xxx, 'yyy', 'zzz')? 

或者 

vm.$set(vm.xxx, 'yyy', 'zzz')

也可以在初始化時的data數(shù)據(jù)中添加目標屬性

注意：data中是不可直接用Vue.set()方式添加屬性的 即 Vue.set(vm, 'yyy', 'zzz')  或者  vm.$set(vm, 'yyy', 'zzz')是不合法的，控制臺會報錯，我們只能往已存在的屬性中增加屬性。

2. 通過索引值修改數(shù)組元素

錯誤方式：

vm.hobbies[0]='上班'
vm.friends[0]={name:'henmeimei',age=”19”}

正確修改方式：

通過數(shù)組的pop(末尾刪除)/push(末尾添加)/shift(開頭刪除)/unshift(開頭添加)/reverse(反轉)/sort(排序)/splice(起始位置，刪除數(shù)量，插入元素)方法操作

Vue.set(vm.items, indexOfItem, newValue) ?? ?
vm.$set(vm.items, indexOfItem, newValue)

通過其他方式（filter/map/...）修改數(shù)組，并重新賦值給原數(shù)組

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論