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

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

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

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

簡(jiǎn)單類型的數(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個(gè)）:push ,shift, unshift, pop, sort, splice, reverse

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

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

• pop：此方法在數(shù)組后面刪除最后一個(gè)元素，并返回?cái)?shù)組，此方法改變了數(shù)組的長(zhǎng)度

• shift：此方法在數(shù)組后面刪除第一個(gè)元素，并返回?cái)?shù)組，此方法改變了數(shù)組的長(zhǎng)度

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

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

二、set方法（推薦）

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

• 第一個(gè)參數(shù)，已經(jīng)存在data中的數(shù)據(jù)，要被修改的數(shù)組
• 第二個(gè)參數(shù)，要修改的數(shù)組下標(biāo)
• 第三個(gè)參數(shù)，要修改的數(shù)組對(duì)應(yīng)下標(biāo)的值

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

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

修改最后一個(gè)為"4"

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

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

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

修改最后一個(gè)為"4"

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

簡(jiǎn)單總結(jié)一下，這三種修改數(shù)組的方法，最后一種不推薦，因?yàn)檫@會(huì)引起vue中整個(gè)數(shù)組數(shù)據(jù)對(duì)應(yīng)的頁面重新渲染，而我們明明只想改變數(shù)組中的某一個(gè)元素。

vue中修改對(duì)象的方法

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

this.obj.dengxi = 'dengxi'?

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

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

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

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

關(guān)于刪除

如果想要將對(duì)象中的某一個(gè)鍵值對(duì)應(yīng)的value刪掉

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

this.obj.dengxi = null

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

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

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

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

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

this.obj = {....}

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

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

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

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

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

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

從上圖黑色部分可以看到，age是對(duì)象，hobbies是字符串?dāng)?shù)組，friends是對(duì)象數(shù)組，他們本身都有g(shù)etter和setter來實(shí)現(xiàn)響應(yīng)式。

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

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

vm.name="xiaoming"

2、類型為對(duì)象

 此時(shí)對(duì)象的每個(gè)屬性都有對(duì)應(yīng)個(gè)getter和setter，也可以實(shí)現(xiàn)響應(yīng)式

 3、類型為數(shù)組

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

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

1. 初始化時(shí)data中不存在該屬性

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

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

或者 

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

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

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

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

錯(cuò)誤方式：

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

正確修改方式：

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

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

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論