亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2022年11月03日 08:25:02   作者:瀾璨  
這篇文章主要介紹了Vue如何監(jiān)測(cè)數(shù)組類(lèi)型數(shù)據(jù)發(fā)生改變的,本文通過(guò)實(shí)例代碼圖文詳解給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

通過(guò)上一節(jié),我們知道了vue檢測(cè)對(duì)象數(shù)據(jù)發(fā)生改變的原理

但是還有個(gè)api我們沒(méi)有講解,Vue.set();

這個(gè)API比較適合在理解了對(duì)象檢測(cè)的原理后進(jìn)行講解

案例準(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>

頁(yè)面效果

需求

  • 我的數(shù)據(jù)都是寫(xiě)在data當(dāng)中的,通過(guò)vue的數(shù)據(jù)代理
  • 在頁(yè)面當(dāng)中實(shí)現(xiàn)了響應(yīng)式開(kāi)發(fā)
  • 那么現(xiàn)在有一個(gè)問(wèn)題
  • 我想給,student 添加一個(gè)屬性,這個(gè)屬性是后來(lái)添加的,不是之前就添加的
  • 想讓 這個(gè)屬性能夠?qū)崿F(xiàn)響應(yīng)式,應(yīng)該如何實(shí)現(xiàn)?

錯(cuò)誤示范

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

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

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

添加測(cè)試

我們?cè)谶@里添加一個(gè)渲染項(xiàng),然后我們添加屬性試試,現(xiàn)在我data當(dāng)中是沒(méi)有這個(gè)屬性的

并不能被vue所識(shí)別到

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

Vue.set()

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

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

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

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

set的局限性

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

我們使用.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è)對(duì)象(student)添加屬性

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

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

準(zhǔn)備工作

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

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

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

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

數(shù)組

對(duì)象

區(qū)別,目前而言

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

直接修改numbers

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

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

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

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

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

之前的錯(cuò)誤解釋

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

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

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

3.這里很重要,請(qǐng)仔細(xì)看

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

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

vue如何監(jiān)測(cè)?

  • 藍(lán)色框當(dāng)中的都是可以對(duì)數(shù)組進(jìn)行修改的,會(huì)改變?cè)袛?shù)組結(jié)構(gòu)
  • 但是filter不會(huì),他會(huì)返回一個(gè)新數(shù)組,不修改原數(shù)組
  • arr 調(diào)用了藍(lán)色框框當(dāng)中的數(shù)組API,自身才會(huì)發(fā)生改變
  • vue當(dāng)中規(guī)定,你只有使用了上述的7個(gè)方法,我才承認(rèn)你修改數(shù)組了

那它咋知道我調(diào)用了上面的7個(gè)API呢?

包裝技術(shù)

原形

使用 Array這個(gè)原形對(duì)象身上的 push 舉例子

這個(gè)push,是給數(shù)組調(diào)用的

我們?cè)诳刂婆_(tái)上來(lái)個(gè)數(shù)組

這個(gè)push是哪里來(lái)的?==> 其實(shí)是一層一層嵌套的,從原形對(duì)象身上來(lái)的

二者身上的push是相等的

vue

vue身上的數(shù)組,使用的并不是 原形數(shù)組Array身上的 API函數(shù)

如何測(cè)試?

很簡(jiǎn)單,回到我們剛剛的案例

這下您能明白了嗎

流程

當(dāng)你對(duì)一個(gè)被vue所管理的數(shù)組進(jìn)行了api的調(diào)用(push,shift,unshift.....)

你調(diào)用的這個(gè)API,就不是原型對(duì)象Array身上的API了;而是vue的api

在這個(gè)api當(dāng)中,會(huì)做兩個(gè)步驟

  • 調(diào)用原形身上的API(push.....)
  • 重新解析模板,生成虛擬dom.......那一套流程

是這么一回事嗎,我們看下官網(wǎng)是如何解答的

官網(wǎng)尋找答案

點(diǎn)我跳轉(zhuǎn)

  • 點(diǎn)擊 列表渲染
  • 點(diǎn)擊 數(shù)組更新檢測(cè)

我們來(lái)看這句話

enmmmm,后面沒(méi)講了,基本其實(shí)到這里就差不多了,后面的都需要在實(shí)際開(kāi)發(fā)當(dāng)中去慢慢琢磨了。

到此這篇關(guān)于Vue如何監(jiān)測(cè)數(shù)組類(lèi)型數(shù)據(jù)發(fā)生改變的?的文章就介紹到這了,更多相關(guān)Vue監(jiān)測(cè)數(shù)組類(lèi)型數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件

    Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2024-03-03
  • VUE3傳值相關(guān)的6種方法總結(jié)

    VUE3傳值相關(guān)的6種方法總結(jié)

    件間傳參是vue開(kāi)發(fā)過(guò)程中一個(gè)很常見(jiàn)的應(yīng)用,對(duì)于我們后端開(kāi)發(fā)來(lái)說(shuō),每次看到這種組件傳參的代碼就一頭霧水,下面這篇文章主要給大家介紹了關(guān)于VUE3傳值相關(guān)的6種方法,需要的朋友可以參考下
    2023-04-04
  • Vue執(zhí)行流程及渲染示例解析

    Vue執(zhí)行流程及渲染示例解析

    這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • Vuex如何獲取getter對(duì)象中的值(包括module中的getter)

    Vuex如何獲取getter對(duì)象中的值(包括module中的getter)

    這篇文章主要介紹了Vuex如何獲取getter對(duì)象中的值(包括module中的getter),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 使用vuetify實(shí)現(xiàn)全局v-alert消息通知的方法

    使用vuetify實(shí)現(xiàn)全局v-alert消息通知的方法

    使用強(qiáng)大的Vuetify開(kāi)發(fā)前端頁(yè)面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡(jiǎn)便的全局消息通知組件,所以自己動(dòng)手寫(xiě)了一個(gè)簡(jiǎn)單的組件,接下來(lái)通過(guò)本文給大家介紹使用vuetify實(shí)現(xiàn)全局v-alert消息通知的詳細(xì)代碼,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • vue實(shí)現(xiàn)瀏覽器全屏展示功能

    vue實(shí)現(xiàn)瀏覽器全屏展示功能

    這篇文章主要介紹了vue實(shí)現(xiàn)瀏覽器全屏展示功能,項(xiàng)目中使用的是sreenfull插件,執(zhí)行命令安裝,具體實(shí)現(xiàn)代碼跟隨小編一起看看吧
    2019-11-11
  • vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式

    vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式

    這篇文章主要介紹了vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2021-07-07
  • Element-ui DatePicker顯示周數(shù)的方法示例

    Element-ui DatePicker顯示周數(shù)的方法示例

    這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • 部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)

    部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)

    這篇文章主要介紹了部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • 詳解如何運(yùn)行vue項(xiàng)目

    詳解如何運(yùn)行vue項(xiàng)目

    這篇文章主要介紹了如何運(yùn)行vue項(xiàng)目,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評(píng)論