Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
通過上一節(jié),我們知道了vue檢測對象數(shù)據(jù)發(fā)生改變的原理
但是還有個api我們沒有講解,Vue.set();
這個API比較適合在理解了對象檢測的原理后進行講解
案例準備
html
<!-- 創(chuàng)建一個容器 --> <div class="app"> <h1>姓名:{{student.name}}</h1> <h1>年齡:{{student.age}}</h1><br> <h2>朋友們</h2> <ul> <!-- 列表渲染 == friends --> <li v-for="(item,index) in friends"> {{item.name}}-{{item.rage}}-{{item.mage}} </li> </ul> </div>
data配置項
<script> const vm = new Vue({ el: '.app', data: { student: { name: 'wavesbright', age: 21, }, friends: [ // 真實年齡,內(nèi)心年齡 {name: "Jack",rage: 32,mage: 40}, {name: "Jony",rage: 24,mage: 45}, {name: "Jone",rage: 28,mage: 50}, ] }, methods: { }, }); </script>
頁面效果
需求
- 我的數(shù)據(jù)都是寫在data當中的,通過vue的數(shù)據(jù)代理
- 在頁面當中實現(xiàn)了響應(yīng)式開發(fā)
- 那么現(xiàn)在有一個問題
- 我想給,student 添加一個屬性,這個屬性是后來添加的,不是之前就添加的
- 想讓 這個屬性能夠?qū)崿F(xiàn)響應(yīng)式,應(yīng)該如何實現(xiàn)?
錯誤示范
1.直接在vm后面加個屬性不就完了?
2.修改 _data,然后給它添加一個屬性?
- 上述兩個操作的問題,添加的屬性沒有進行數(shù)據(jù)代理
- 無法完成響應(yīng)式
- 仔細看的話,在student這個對象當中,sex這個屬性是沒有g(shù)et和set函數(shù)的
添加測試
我們在這里添加一個渲染項,然后我們添加屬性試試,現(xiàn)在我data當中是沒有這個屬性的
并不能被vue所識別到
那么我們后面想要自己添加屬性就沒有辦法完成響應(yīng)式了嗎,誒,這就是我們接下來要引入的API
Vue.set()
- 該API需要三個參數(shù)
- target: 目標
- key: 添加的屬性名
- val: 添加的屬性值
我現(xiàn)在算是明白了,小程序的 this.setData() 就是從這里變來的
這里其實應(yīng)該是 .student的;因為操作的都是同一個對象的地址
set的局限性
我現(xiàn)在要在data當中,添加一個屬性,這個屬性是leader == 校長
我們使用.set添加試試
- 這里報錯的意思就是,不允許直接在vue實例身上添加一個屬性
- 解讀一下這段話哈
- 我現(xiàn)在是在_data當中添加屬性
- 但是這個添加的屬性,最后會掛載在vue實例身上
- 所以,這里使用.set是不允許的,不能直接添加
- .set()不能在data當中直接添加屬性
- 只能給data當中的某個對象(student)添加屬性
vm是不能作為target的,vm當中的data,也不能作為target
監(jiān)測數(shù)組
準備工作
- 新建一個demo,重新配置了數(shù)據(jù)項data
- 在data當中有兩個屬性,一個numbers的數(shù)組,一個student的對象
- 我們查看vue實例對象,在查看之前可以很明確的說,numbers 和 student 都掛載在了vue實例身上,并且,有專門為他倆服務(wù)的get和set
數(shù)據(jù)代理
現(xiàn)在我們點擊去看看二者有什么不同,或者說,vue當中對數(shù)組和對象類型的數(shù)據(jù)是如何代理的
數(shù)組和對象的不同
數(shù)組
對象
區(qū)別,目前而言
- 數(shù)組當中的數(shù)據(jù),是沒有進行數(shù)據(jù)代理的,沒有專門為 元素 服務(wù) 的 get和set
- 而對象當中,每個屬性都是有g(shù)et和set的,哪怕這個屬性是對象也有
- 也就是說,如果我們直接在vue當中直接修改numbers對應(yīng)索引的值,vue是觀測不到的
直接修改numbers
我們寫一串DOM元素進行測試
<div class="app"> <ul> <li v-for="item in numbers">{{item}}</li> </ul> </div>
現(xiàn)在,我直接在控制臺中對數(shù)組當中的元素進行修改
我們將最后一項 從5改為6
數(shù)據(jù)的確修改成功了,但是vue檢測不到,頁面無法響應(yīng)
之前的錯誤解釋
現(xiàn)在,我們來回顧一下之前遇到的bug,我們添加一個persons對象數(shù)組
從控制臺我們來觀察一下這個persons
- 這是一個對象數(shù)組,這個數(shù)組當中的每一項數(shù)據(jù),都沒有被進行數(shù)據(jù)代理
- 但是因為每一項 數(shù)據(jù) 都是對象類型,所以 在對象類型當中 數(shù)據(jù)是進行了代理(get和set)的
3.這里很重要,請仔細看
所以為什么下面的修改不起作用,因為根本沒代理,沒有代理無法完成響應(yīng)式數(shù)據(jù)
這個問題解決了順勢拋出下一個問題,vue怎么就知道數(shù)組內(nèi)部的屬性發(fā)生改變了呢,它是如何監(jiān)測到的?
vue如何監(jiān)測?
- 藍色框當中的都是可以對數(shù)組進行修改的,會改變原有數(shù)組結(jié)構(gòu)
- 但是filter不會,他會返回一個新數(shù)組,不修改原數(shù)組
- arr 調(diào)用了藍色框框當中的數(shù)組API,自身才會發(fā)生改變
- vue當中規(guī)定,你只有使用了上述的7個方法,我才承認你修改數(shù)組了
那它咋知道我調(diào)用了上面的7個API呢?
包裝技術(shù)
原形
使用 Array這個原形對象身上的 push 舉例子
這個push,是給數(shù)組調(diào)用的
我們在控制臺上來個數(shù)組
這個push是哪里來的?==> 其實是一層一層嵌套的,從原形對象身上來的
二者身上的push是相等的
vue
vue身上的數(shù)組,使用的并不是 原形數(shù)組Array身上的 API函數(shù)
如何測試?
很簡單,回到我們剛剛的案例
這下您能明白了嗎
流程
當你對一個被vue所管理的數(shù)組進行了api的調(diào)用(push,shift,unshift.....)
你調(diào)用的這個API,就不是原型對象Array身上的API了;而是vue的api
在這個api當中,會做兩個步驟
- 調(diào)用原形身上的API(push.....)
- 重新解析模板,生成虛擬dom.......那一套流程
是這么一回事嗎,我們看下官網(wǎng)是如何解答的
官網(wǎng)尋找答案
- 點擊 列表渲染
- 點擊 數(shù)組更新檢測
我們來看這句話
enmmmm,后面沒講了,基本其實到這里就差不多了,后面的都需要在實際開發(fā)當中去慢慢琢磨了。
到此這篇關(guān)于Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的?的文章就介紹到這了,更多相關(guān)Vue監(jiān)測數(shù)組類型數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vuex如何獲取getter對象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對象中的值(包括module中的getter),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02Element-ui DatePicker顯示周數(shù)的方法示例
這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-07-07部署vue+Springboot前后端分離項目的步驟實現(xiàn)
這篇文章主要介紹了部署vue+Springboot前后端分離項目的步驟實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-05-05