Vue監(jiān)聽數(shù)據(jù)的原理詳解
一、引入
首先畫一個簡單的圖。
我們在寫Vue的時(shí)候總會和數(shù)據(jù)打交道，將我們的目標(biāo)數(shù)據(jù)寫在data中，然后在template的差值表達(dá)式中通過{{xxx}}的格式可以響應(yīng)式的渲染數(shù)據(jù)。當(dāng)data中的數(shù)據(jù)改變時(shí)，這里橙色的線就會引起差值表達(dá)式的變化。那么問題來了，我們?nèi)绾伪O(jiān)測到data中數(shù)據(jù)的改變呢？這里就涉及到了Vue監(jiān)測數(shù)據(jù)的問題。
二、監(jiān)測對象
2.1 為什么需要監(jiān)測對象
首先寫出需要用到的靜態(tài)頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更新數(shù)據(jù)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<li v-for="p in persons" :key="p.id">
{{p.name}} - {{p.age}} = {{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
persons: [
{id:'001',name:'黑貓幾絳',age: 20, sex: '未知'},
{id:'002',name:'白貓幾絳',age: 23, sex: '男'},
{id:'003',name:'阿貓幾絳',age: 18, sex: '女'}
]
}
})
</script>
</body>
</html>
現(xiàn)在我們假設(shè)有一個需求，在頁面上添加一個按鈕，通過這個按鈕可以修改id為002的數(shù)據(jù)。
<button @click="change">點(diǎn)擊修改白貓幾絳</button>
methods:{
change(){
this.persons[1].name = '白馬'
this.persons[1].age = 17
this.persons[1].sex = '未知'
}
}
逐個屬性的修改，可以改變id為002的數(shù)據(jù)，但是這樣是否有些繁瑣，我們是否可以將這么長的一段修改改為一個對象？
this.persons[1] = {id:'002',name:'白馬',age: 17, sex: '未知'}
此時(shí)在瀏覽器當(dāng)中點(diǎn)擊按鈕后，頁面并沒有任何反應(yīng)。然而出乎意料的是，在vm實(shí)例對象中，persons[1]的數(shù)據(jù)確確實(shí)實(shí)得到了更改！
為了解決這個問題，我們可以先看看另外一個例子，然后通過在瀏覽器里面輸出來查看具體執(zhí)行過程，在理解如何監(jiān)測后再回來看這個問題。
2.2數(shù)據(jù)代理
要想理解數(shù)據(jù)監(jiān)測，還需要理解一個前置概念：數(shù)據(jù)代理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>監(jiān)測對象</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
name: '黑貓幾絳',
age: 20
}
})
</script>
</body>
</html>
在以前的時(shí)候我們?nèi)绻朐L問data里的數(shù)據(jù)，可以直接通過實(shí)例對象，如vm.name，vm.age拿到具體的數(shù)值。其實(shí)這是做了數(shù)據(jù)代理后的簡化寫法。
Vue將data進(jìn)行了一次加工，將data中的數(shù)據(jù)放在了_data中，實(shí)例對象通過._data的方式可以拿到加工后的數(shù)據(jù)。只不過屬性的值不再直接給出，而是通過get方法來獲取，有點(diǎn)類似于面向?qū)ο笳Z言如JAVA中獲取類內(nèi)私有變量時(shí)使用的getter方法。這里還有一個set方法，當(dāng)data里面數(shù)據(jù)值改變的時(shí)候，就會調(diào)用該set方法，導(dǎo)致重新解析模板，然后生成新的虛擬DOM進(jìn)行新舊DOM對比，最后更新頁面。
在這里其實(shí)涉及到了源碼方面的問題，我們在本文中不考慮源碼，不然太復(fù)雜了。簡化來說，其實(shí)在Vue內(nèi)部有這樣的一種方法：
vm._data = data = new Observer(data)
在Observer函數(shù)中先通過Object.keys獲取data的所有屬性形成一個數(shù)組，然后通過遍歷該數(shù)組，使用Object.defineProperty實(shí)現(xiàn)數(shù)據(jù)劫持，最后將計(jì)算的最終結(jié)果交給_data。
2.3 對象監(jiān)測相關(guān)API之Vue.set
還是先上靜態(tài)頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更新數(shù)據(jù)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<hr/>
<h2>學(xué)生姓名：{{student.name}}</h2>
<h2>學(xué)生性別：{{student.sex}}</h2>
<h2>學(xué)生年齡：{{student.age}}</h2>
<h1>朋友</h1>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}} - {{f.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
name:'MIT',
address:'UUU',
student:{
name: 'tom',
age: 20,
friends: [
{name: 'jack', age: 21},
{name: 'mary', age: 20}
]
},
}
})
</script>
</body>
</html>
也許你會注意到，template中出現(xiàn)的sex其實(shí)并不存在于data中。當(dāng)輸出一個對象中不存在的屬性值時(shí)，會輸出undefined，但是Vue經(jīng)過處理后不會顯示undefined值，也就是說此時(shí)頁面上學(xué)生性別后面是空值，控制臺也不會出現(xiàn)報(bào)錯。現(xiàn)在提出一個需求，我們?nèi)绻枰獮閷W(xué)生添加一個新的性別屬性。要求是不能改變data中的現(xiàn)有數(shù)據(jù)，即sex不能直接放入data中。
根據(jù)之前介紹的_data，我們可以嘗試通過_data直接綁定上sex屬性。然后發(fā)現(xiàn)并沒有渲染到頁面上。其實(shí)這里和2.1中的問題有點(diǎn)類似了。下面進(jìn)行分析。
我們先打印一下vm的_data看看。由下圖可以清楚的看到，在student對象中成功的添加上了sex屬性名和名為未知的屬性值。但是繼續(xù)往下看，在下面的眾多get與set方法中并沒有出現(xiàn)針對sex的方法，這也就代表著這個后添加的屬性并沒有成為響應(yīng)式數(shù)據(jù)。
為了解決這個問題，我們可以使用Vue提供的API，即Vue.set()方法，來讓后添加的數(shù)據(jù)也成為響應(yīng)式數(shù)據(jù)。該方法第一個參數(shù)target表示要往誰身上添加數(shù)據(jù)，第二個參數(shù)key表示要添加的屬性名是什么，第三個參數(shù)表示屬性值。
此時(shí)我們可以通過Vue.set(vm._data.student,'sex','未知')，不僅可以改變_data中的屬性，還可以受到監(jiān)測，改變頁面中的數(shù)據(jù)。還有一個同樣效果的api，即vm.$set，用法和Vue.set()相同，參數(shù)也是相同，vm.$set(vm._data.student,'sex','未知')，用這兩個方法添加上去的數(shù)據(jù)即可成為響應(yīng)式數(shù)據(jù)。
在實(shí)現(xiàn)功能后我們可以考慮一下優(yōu)化簡寫，由于數(shù)據(jù)代理，vm.student === vm._data.student，所以可以簡寫為Vue.set(vm.student,'sex','未知)。
接下來在實(shí)際編碼中來驗(yàn)證瀏覽器中的想法，假設(shè)通過點(diǎn)擊一個按鈕來添加sex屬性，這里就不再過多描述了，直接貼代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更新數(shù)據(jù)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="addSex">點(diǎn)擊按鈕新增性別</button>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<hr/>
<h2>學(xué)生姓名：{{student.name}}</h2>
<h2>學(xué)生性別：{{student.sex}}</h2>
<h2>學(xué)生年齡：{{student.age}}</h2>
<h1>朋友</h1>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}} - {{f.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
name:'MIT',
address:'UUU',
student:{
name: 'tom',
age: 20,
friends: [
{name: 'jack', age: 21},
{name: 'mary', age: 20}
]
},
},
methods:{
addSex(){
// 在methoods中，this的指向就是vm實(shí)例對象
// 這里還可以寫成this.$set(this.student, 'sex', '男')
Vue.set(this.student, 'sex', '男')
}
}
})
</script>
</body>
</html>
但是使用這樣的方法有一定的局限性，在添加成功的時(shí)候是設(shè)置給了data中的student對象，那么假如直接設(shè)置給data對象呢？比如假設(shè)需要在這里添加一個新的屬性建校日期time，如果仍然采用Vue.set方法的話，就會報(bào)錯。
由此可見該方法只能用于向響應(yīng)式對象（如這里的data.student）上添加新property，且觸發(fā)視圖更新。因?yàn)閂ue無法探測普通的新增property。
2.4 為對象賦多個新值
有時(shí)候有你可能需要為已有對象賦值多個新 property，比如使用Object.assign()或者是_.extend()。但是，這樣添加到對象上的新 property 不會觸發(fā)更新。因此在這種情況下，你應(yīng)該用原對象與要混合進(jìn)去的對象的 property 一起創(chuàng)建一個新的對象。
比如我想向student新增以前并不存在的身高和體重屬性，我可以這樣做：
const add = {'height': 180, "weight": 150}
this.student = Object.assign({},this.student, add)
將原來的對象和新增的對象進(jìn)行合并后賦值給一個空的新對象，然后將該對象賦值給this.student，最終數(shù)據(jù)可以響應(yīng)式地添加到student身上。
三、監(jiān)測數(shù)組
依舊是先上靜態(tài)頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更新數(shù)據(jù)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="addSex">點(diǎn)擊按鈕新增性別</button>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<hr/>
<h2>學(xué)生姓名：{{student.name}}</h2>
<h2>學(xué)生性別：{{student.sex}}</h2>
<h2>學(xué)生年齡：{{student.age}}</h2>
<h1>朋友</h1>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}} - {{f.age}}
</li>
</ul>
<h1>愛好</h1>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
name:'MIT',
address:'UUU',
student:{
name: 'tom',
age: 20,
friends: [
{name: 'jack', age: 21},
{name: 'mary', age: 20}
],
hobby:['吃飯','睡覺','打豆豆']
},
},
methods:{
addSex(){
this.$set(this.student, 'sex', '男')
}
}
})
</script>
</body>
</html>
在控制臺中打印vm._data后我們可以清晰的看到，對于student中的hobby數(shù)組，數(shù)組整體來說有g(shù)et和set，是響應(yīng)式的。但是數(shù)組里面的元素并非響應(yīng)式，而是簡單的掛在了數(shù)組中，這也就是為什么在2.1中，當(dāng)我們嘗試對數(shù)組索引下標(biāo)進(jìn)行重新賦值時(shí)，頁面上并沒有響應(yīng)。如果將hobby數(shù)組改為對象，再打印一下，就會發(fā)現(xiàn)對象中的屬性是響應(yīng)式的。由此我們可以粗略猜測，在Vue中，如果想要通過索引修改數(shù)組中的數(shù)值，就需要使用某些特殊方法。
方法從何而來？現(xiàn)在我們可以看看Vue文檔里面是怎么說的。在文檔列表渲染->數(shù)組更新檢測->變更方法的頁面中有這樣一段話：
Vue 將被偵聽的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會觸發(fā)視圖更新。這些被包裹過的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
要想修改數(shù)組里面的數(shù)據(jù)，我們不妨試試以上的七種方法?？吹竭@些方法也許你會想到Array原型鏈上的方法，然而在這里并不完全正確。Vue對這些方法進(jìn)行了一次包裹封裝，Vue在解析到這些方法的時(shí)候，第一步仍然是正常的調(diào)用Array原型鏈中的方法，第二步則是重新解析模板，這也就是為什么使用這些方法可以觸發(fā)視圖更新，因?yàn)橹匦陆馕瞿０搴髸尚碌奶摂MDOM進(jìn)行新舊DOM對比，最后更新頁面。通過vm._data.student.hobby.push === Array.prototype.push這個判斷為false可以印證這個想法。
比如在這里，我們?nèi)绻胍薷膆obby當(dāng)中的打豆豆為學(xué)習(xí)，應(yīng)該怎么做？
在接觸這些知識點(diǎn)之前我會使用下面這段代碼，緊接而來的就是一個錯誤的渲染。在改變數(shù)據(jù)后頁面中并沒有更新。
this.student.hobby[2] = '學(xué)習(xí)'
接下來我們試試兩種方法，首先試試剛剛介紹的數(shù)組操作方法。
this.student.hobby.splice(2,3,'學(xué)習(xí)')
接下來試試以前介紹過的Vue.set方法。
這里補(bǔ)充一下，在2.3中我們介紹利用該方法修改對象里面的數(shù)值時(shí)，方法的第二個參數(shù)是屬性名；而在數(shù)組中使用該方法的時(shí)候，第二個參數(shù)應(yīng)該為數(shù)組中元素的下標(biāo)。
this.$set(this.student.hobby,2,'學(xué)習(xí)')
這兩個方法都可以成功修改hobby中的數(shù)據(jù)，并且成功更新到頁面中。
總的來說，不可以通過數(shù)組的索引值進(jìn)行賦值。但是可以改變數(shù)組的本身指向，在之前的圖片中我們已經(jīng)看到，hobby數(shù)組本身是響應(yīng)式的，是可以通過get和set進(jìn)行監(jiān)控的。比如在業(yè)務(wù)邏輯中使用了filter對數(shù)組進(jìn)行過濾，然后賦值給在data中已經(jīng)存在的數(shù)組。這里我們可以再看看文檔中替換數(shù)組這一節(jié)的介紹。如filter、concat、slice這些方法并不會變更原始數(shù)組，而總是返回一個新數(shù)組，當(dāng)使用變更方法時(shí)，可以用新數(shù)組替換舊數(shù)組。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會無限循環(huán)問題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會無限循環(huán)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue混入mixins滾動觸底的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03
利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝實(shí)例
組件(Component) 是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝的相關(guān)資料,需要的朋友可以參考下2021-09-09
詳解vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了typescript中this報(bào)錯的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
骨架屏就是在頁面未渲染完成的時(shí)候，先用一些簡單的圖形大致勾勒出頁面的基本輪廓，給用戶帶來更好的體驗(yàn)。這篇文章主要介紹了vue 移動端注入骨架屏,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
這篇文章主要介紹了vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09