成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

淺究Vue響應(yīng)式原理

Karuru / 1639人閱讀

摘要：在讀取訪問(wèn)器屬性時(shí)，就會(huì)調(diào)用函數(shù)，該函數(shù)負(fù)責(zé)返回有效的值在寫(xiě)入訪問(wèn)器屬性時(shí)，會(huì)調(diào)用函數(shù)并傳入新值，該函數(shù)負(fù)責(zé)決定如何處理數(shù)據(jù)，但是這兩個(gè)函數(shù)不一定非要同時(shí)存在。

前言

Vue最明顯的特性之一便是它的響應(yīng)式系統(tǒng)，其數(shù)據(jù)模型即是普通的 JavaScript 對(duì)象。而當(dāng)你讀取或?qū)懭胨鼈儠r(shí)，視圖便會(huì)進(jìn)行響應(yīng)操作。文章簡(jiǎn)要闡述下其實(shí)現(xiàn)原理，如有錯(cuò)誤，還請(qǐng)不吝指正。個(gè)人博客鏈接：hiybm.cn

響應(yīng)式data
{{ message }}


const vm = new Vue({
    el: "#exp",
    data: {
        message: "This is A"
    }
})
vm.message = "This is B"    // 響應(yīng)式
vm._message = "This is C"    // 非響應(yīng)式

上述代碼中，data是Vue實(shí)例的數(shù)據(jù)對(duì)象，當(dāng)實(shí)例初始化時(shí)，Vue 會(huì)遍歷 data 中的所有屬性，并且使用 Object.definePropery 把這些屬性全都轉(zhuǎn)為 getter/setter ，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。另外，Object.defineProperty 是 ES5 中一個(gè)無(wú)法 shim(墊片) 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 鍵值對(duì))：瀏覽器 API 創(chuàng)建的原生對(duì)象。所以，在data中聲明過(guò)的message是響應(yīng)式數(shù)據(jù)，而由于_message是在data外使用 Vue 實(shí)例增加的數(shù)據(jù)，所以亦不屬于響應(yīng)式。

關(guān)于Object.definePropery

Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回這個(gè)對(duì)象。這個(gè)API是實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的關(guān)鍵所在。

Syntax: Object.defineProperty(obj, prop, descriptor)

obj: 要定義屬性的對(duì)象

prop: 要定義或修改的屬性的名稱(chēng)

descriptor: 將被定義或修改的屬性描述符。

Tips： 要知道ECMAScript中有兩種屬性：數(shù)據(jù)屬性和訪問(wèn)器屬性。這里的descriptor可取值有數(shù)據(jù)屬性和訪問(wèn)器屬性。
數(shù)據(jù)屬性： 包含一個(gè)數(shù)據(jù)值的位置，在此位置可以進(jìn)行讀寫(xiě)操作，有以下特性：

[[Configurable]]：對(duì)屬性的操作可配置性開(kāi)關(guān)，如刪除，修改。默認(rèn)值為true。

[[Enumberble]]：是否可枚舉（通過(guò)for-in）。默認(rèn)值為true。

[[Writable]]：能否修改屬性的值。默認(rèn)值為true。

[[value]]：包含這個(gè)屬性的數(shù)據(jù)值，讀取時(shí)從該位置讀，寫(xiě)入時(shí)把新值存到該位置。默認(rèn)值為undefined。

訪問(wèn)器屬性： 不包含數(shù)據(jù)值，包含一個(gè)函數(shù)對(duì)（getter/setter）。特性如下：

[[Configurable]]：對(duì)屬性的操作可配置性開(kāi)關(guān)，如刪除，修改。默認(rèn)值為true。

[[Enumberble]]：是否可枚舉（通過(guò)for-in）。默認(rèn)值為true。

[[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined。

[[Set]]：寫(xiě)入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined。

Tips： 在讀取訪問(wèn)器屬性時(shí)，就會(huì)調(diào)用getter函數(shù)，該函數(shù)負(fù)責(zé)返回有效的值；在寫(xiě)入訪問(wèn)器屬性時(shí)，會(huì)調(diào)用setter函數(shù)并傳入新值，該函數(shù)負(fù)責(zé)決定如何處理數(shù)據(jù)，但是這兩個(gè)函數(shù)不一定非要同時(shí)存在。Vue便是利用getter/setter這一特性來(lái)實(shí)現(xiàn)的響應(yīng)系統(tǒng)。
示例代碼：

// 定義一個(gè)book對(duì)象，_year和edition都屬于數(shù)據(jù)屬性。
var book = {
    _year : 2004,
    edition : 1
};
// 對(duì)book對(duì)象創(chuàng)建 year 訪問(wèn)器屬性。
Object.defineProperty(book, "year",{ 
    // 讀取 year 訪問(wèn)器屬性時(shí)，get() 方法返回 _year 的值。
    get : function () {
        console.info(this._year, "get");   // 2004
        return this._year;
    },
    // 寫(xiě)入 year 訪問(wèn)器屬性時(shí)，set() 方法對(duì)新值進(jìn)行操作。
    set : function (newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            console.info(this._year, "set")   // 2005   
            this.edition += newValue - 2004;
        }
    }
});
// 讀取 year 訪問(wèn)器屬性時(shí)會(huì)返回_year的值。
book.year;
// 寫(xiě)入 year 訪問(wèn)器屬性時(shí)會(huì)調(diào)用set() 函數(shù)，進(jìn)行操作。
book.year = 2005;   
console.info(book.edition)  // 2
console.info(book) // 此處藏有彩蛋。
watcher

官方表述：每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴(lài)，之后當(dāng)依賴(lài)項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。
如下圖所示：

Tips：模板中每個(gè)指令/數(shù)據(jù)綁定都有一個(gè)對(duì)應(yīng)的 watcher 對(duì)象。其中 watcher扮演的角色相當(dāng)于是一個(gè)紐帶，這個(gè)紐帶的作用就是依賴(lài)收集。

END

文中還有部分深層細(xì)節(jié)沒(méi)有講述到，后續(xù)我也會(huì)接著更新系列文章來(lái)進(jìn)一步深深深究vue底層的響應(yīng)式原理，SYNT。BTW，如果有同學(xué)發(fā)現(xiàn)彩蛋了，歡迎在評(píng)論區(qū)交流。?

參考鏈接

Object.defineproperty
深入響應(yīng)式原理
深入淺出之vue響應(yīng)式原理
Javascript高級(jí)程序設(shè)計(jì)（第3版）6.1章節(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90258.html

相關(guān)文章

  • vue - 響應(yīng)式原理梳理(一)

    摘要：?jiǎn)栴}為什么修改即可觸發(fā)更新和的關(guān)聯(lián)關(guān)系官方介紹的官網(wǎng)文檔，對(duì)響應(yīng)式屬性的原理有一個(gè)介紹。因此本文在源碼層面，對(duì)響應(yīng)式原理進(jìn)行梳理，對(duì)關(guān)鍵步驟進(jìn)行解析。 描述 ?我們通過(guò)一個(gè)簡(jiǎn)單的 Vue應(yīng)用 來(lái)演示 Vue的響應(yīng)式屬性： html： {{message}} js: let vm = new Vue({ el: #ap...

    weknow619 評(píng)論0 收藏0

  • 【Vue原理】響應(yīng)式原理 - 白話版

    摘要：所以我今后打算把每一個(gè)內(nèi)容分成白話版和源碼版。有什么錯(cuò)誤的地方，感謝大家能夠指出響應(yīng)式系統(tǒng)我們都知道，只要在實(shí)例中聲明過(guò)的數(shù)據(jù)，那么這個(gè)數(shù)據(jù)就是響應(yīng)式的。什么是響應(yīng)式，也即是說(shuō)，數(shù)據(jù)發(fā)生改變的時(shí)候，視圖會(huì)重新渲染，匹配更新為最新的值。 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 V...

    gggggggbong 評(píng)論0 收藏0

  • 【Vue原理】Props - 源碼版

    寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過(guò)了，也真是會(huì)隨著時(shí)間慢慢忘記的。 幸好我做...

    light 評(píng)論0 收藏0

  • vue - 響應(yīng)式原理梳理(二)

    摘要：原型方法通過(guò)原型方法方法來(lái)掛載實(shí)例。當(dāng)響應(yīng)式屬性發(fā)生變化時(shí)，會(huì)通知依賴(lài)列表中的對(duì)象進(jìn)行更新。此時(shí)，對(duì)象執(zhí)行方法，重新渲染節(jié)點(diǎn)。在執(zhí)行過(guò)程中，如果需要讀取響應(yīng)式屬性，則會(huì)觸發(fā)響應(yīng)式屬性的。總結(jié)響應(yīng)式屬性的原理 vue實(shí)例 初始化 完成以后，接下來(lái)就要進(jìn)行 掛載。 vue實(shí)例掛載，即為將vue實(shí)例對(duì)應(yīng)的 template模板，渲染成 Dom節(jié)點(diǎn)。 原型方法 - $mount ? 通過(guò)原...

    mochixuan 評(píng)論0 收藏0

  • Vue 響應(yīng)式實(shí)現(xiàn)原理（個(gè)人在學(xué)習(xí)完Vue基礎(chǔ)的情況下的理解）

    摘要：對(duì)象用戶看到的對(duì)象用戶看到的是這個(gè)對(duì)象即是實(shí)際使用的對(duì)象實(shí)際使用的對(duì)象復(fù)制更新相應(yīng)的代碼實(shí)現(xiàn)對(duì)象代理響應(yīng)式原理前提官網(wǎng)說(shuō)過(guò)，限于現(xiàn)代瀏覽器限制，無(wú)法監(jiān)測(cè)通過(guò)這種方式添加的屬性，所以，他的響應(yīng)式是建立在實(shí)例化對(duì)象的時(shí)候，預(yù)定義屬性的基礎(chǔ)上的。 1. Vue 對(duì)象 1.1 用戶看到的對(duì)象 var app = new Vue({ el: #app , /* * 用...

    zsy888 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<