快捷導(dǎo)航

Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)

更新時(shí)間：2022年11月03日 08:25:02 作者：瀾璨

這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

案例準(zhǔn)備

html

<!-- 創(chuàng)建一個(gè)容器 -->
    <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配置項(xiàng)

<script>
    const vm = new Vue({
        el: '.app',
        data: {
            student: {
                name: 'wavesbright',
                age: 21,
            },
            friends: [ // 真實(shí)年齡，內(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當(dāng)中的，通過vue的數(shù)據(jù)代理
在頁面當(dāng)中實(shí)現(xiàn)了響應(yīng)式開發(fā)
那么現(xiàn)在有一個(gè)問題
我想給，student 添加一個(gè)屬性，這個(gè)屬性是后來添加的，不是之前就添加的
想讓這個(gè)屬性能夠?qū)崿F(xiàn)響應(yīng)式，應(yīng)該如何實(shí)現(xiàn)？

錯(cuò)誤示范

1.直接在vm后面加個(gè)屬性不就完了？

2.修改 _data，然后給它添加一個(gè)屬性？

上述兩個(gè)操作的問題，添加的屬性沒有進(jìn)行數(shù)據(jù)代理
無法完成響應(yīng)式
仔細(xì)看的話，在student這個(gè)對象當(dāng)中，sex這個(gè)屬性是沒有g(shù)et和set函數(shù)的

添加測試

我們在這里添加一個(gè)渲染項(xiàng)，然后我們添加屬性試試，現(xiàn)在我data當(dāng)中是沒有這個(gè)屬性的

并不能被vue所識別到

那么我們后面想要自己添加屬性就沒有辦法完成響應(yīng)式了嗎，誒，這就是我們接下來要引入的API

Vue.set()

該API需要三個(gè)參數(shù)

target： 目標(biāo)
key： 添加的屬性名
val： 添加的屬性值

我現(xiàn)在算是明白了，小程序的 this.setData() 就是從這里變來的

這里其實(shí)應(yīng)該是 .student的；因?yàn)椴僮鞯亩际峭粋€(gè)對象的地址

set的局限性

我現(xiàn)在要在data當(dāng)中，添加一個(gè)屬性，這個(gè)屬性是leader == 校長

我們使用.set添加試試

這里報(bào)錯(cuò)的意思就是，不允許直接在vue實(shí)例身上添加一個(gè)屬性
解讀一下這段話哈
- 我現(xiàn)在是在_data當(dāng)中添加屬性
- 但是這個(gè)添加的屬性，最后會(huì)掛載在vue實(shí)例身上
- 所以，這里使用.set是不允許的，不能直接添加
.set()不能在data當(dāng)中直接添加屬性
只能給data當(dāng)中的某個(gè)對象（student）添加屬性

vm是不能作為target的，vm當(dāng)中的data，也不能作為target

監(jiān)測數(shù)組

準(zhǔn)備工作

新建一個(gè)demo，重新配置了數(shù)據(jù)項(xiàng)data
在data當(dāng)中有兩個(gè)屬性，一個(gè)numbers的數(shù)組，一個(gè)student的對象
我們查看vue實(shí)例對象，在查看之前可以很明確的說，numbers 和 student 都掛載在了vue實(shí)例身上，并且，有專門為他倆服務(wù)的get和set

數(shù)據(jù)代理

現(xiàn)在我們點(diǎn)擊去看看二者有什么不同，或者說，vue當(dāng)中對數(shù)組和對象類型的數(shù)據(jù)是如何代理的

數(shù)組和對象的不同

數(shù)組

對象

區(qū)別，目前而言

數(shù)組當(dāng)中的數(shù)據(jù)，是沒有進(jìn)行數(shù)據(jù)代理的，沒有專門為元素服務(wù) 的 get和set
而對象當(dāng)中，每個(gè)屬性都是有g(shù)et和set的，哪怕這個(gè)屬性是對象也有
也就是說，如果我們直接在vue當(dāng)中直接修改numbers對應(yīng)索引的值，vue是觀測不到的

直接修改numbers

我們寫一串DOM元素進(jìn)行測試

<div class="app">
    <ul>
    	<li v-for="item in numbers">{{item}}</li>	
    </ul>
</div>

現(xiàn)在，我直接在控制臺中對數(shù)組當(dāng)中的元素進(jìn)行修改

我們將最后一項(xiàng) 從5改為6

數(shù)據(jù)的確修改成功了，但是vue檢測不到，頁面無法響應(yīng)

之前的錯(cuò)誤解釋

現(xiàn)在，我們來回顧一下之前遇到的bug，我們添加一個(gè)persons對象數(shù)組

從控制臺我們來觀察一下這個(gè)persons

這是一個(gè)對象數(shù)組，這個(gè)數(shù)組當(dāng)中的每一項(xiàng)數(shù)據(jù)，都沒有被進(jìn)行數(shù)據(jù)代理
但是因?yàn)槊恳豁?xiàng) 數(shù)據(jù) 都是對象類型，所以在對象類型當(dāng)中數(shù)據(jù)是進(jìn)行了代理(get和set)的

3.這里很重要，請仔細(xì)看

所以為什么下面的修改不起作用，因?yàn)楦緵]代理，沒有代理無法完成響應(yīng)式數(shù)據(jù)

這個(gè)問題解決了順勢拋出下一個(gè)問題，vue怎么就知道數(shù)組內(nèi)部的屬性發(fā)生改變了呢，它是如何監(jiān)測到的？