Vue 之響應(yīng)式數(shù)據(jù)

ZHAO_ 發(fā)布于2019-08-23 10:56 / 1260人閱讀

摘要：目標(biāo)自己實(shí)現(xiàn)輪子數(shù)據(jù)響應(yīng)式引擎基石屬性攔截器操作對(duì)象數(shù)據(jù)類型數(shù)據(jù)處理

目標(biāo)

自己實(shí)現(xiàn)輪子：數(shù)據(jù)響應(yīng)式引擎

基石

屬性攔截器

操作對(duì)象

Data
數(shù)據(jù)類型

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

class Observer {
    value: any;
    dep: Dep;
    vmCount: number;
    constructor(value: any) {
        this.value = value;
        this.dep = new Dep();
        this.vmCount = 0;
        def(value, "__ob__", this);
        if(Array.isArray(value)) {
            augment(value, arrayMethods, arrayKeys);
            this.observerArray(value);
        }else {
            this.walk(value);
        }
    },
    
    walk(obj: Object) {
        const keys = Object.keys(obj);
        for (let i = 0; i < keys.length; i ++) {
            defineReactive(obj, keys[i]);
        } 
    },
    
    observerArray (items: Array) {
        for (let i = 0; i< items.length; i++) {
            observer(items[i]);
        }
    }
}

云服務(wù)器 GPU云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

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

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

相關(guān)文章

vue源碼分析系列之響應(yīng)式數(shù)據(jù)（一）

摘要：代碼初始化部分一個(gè)的時(shí)候做了什么當(dāng)我們一個(gè)時(shí)，實(shí)際上執(zhí)行了的構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)內(nèi)部掛載了很多方法，可以在我的上一篇文章中看到。合并構(gòu)造函數(shù)上掛載的與當(dāng)前傳入的非生產(chǎn)環(huán)境，包裝實(shí)例本身，在后期渲染時(shí)候，做一些校驗(yàn)提示輸出。概述在使用vue的時(shí)候，data,computed,watch是一些經(jīng)常用到的概念，那么他們是怎么實(shí)現(xiàn)的呢，讓我們從一個(gè)小demo開始分析一下它的流程。 dem...

liujs 2019-08-23 15:11 評(píng)論0 收藏0
vue源碼分析系列之響應(yīng)式數(shù)據(jù)（四）

摘要：執(zhí)行當(dāng)時(shí)傳入的回調(diào)，并將新值與舊值一并傳入。文章鏈接源碼分析系列源碼分析系列之環(huán)境搭建源碼分析系列之入口文件分析源碼分析系列之響應(yīng)式數(shù)據(jù)一源碼分析系列之響應(yīng)式數(shù)據(jù)二源碼分析系列之響應(yīng)式數(shù)據(jù)三前言上一節(jié)著重講述了initComputed中的代碼，以及數(shù)據(jù)是如何從computed中到視圖層的，以及data修改后如何作用于computed。這一節(jié)主要記錄initWatcher中的內(nèi)容。 ...

GHOST_349178 2019-08-23 15:16 評(píng)論0 收藏0
Vue 進(jìn)階系列（一）之響應(yīng)式原理及實(shí)現(xiàn)

摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)什么是響應(yīng)式表示一個(gè)狀態(tài)改變之后，如何動(dòng)態(tài)改變整個(gè)系統(tǒng)，在實(shí)際項(xiàng)目應(yīng)用場(chǎng)景中即數(shù)據(jù)如何動(dòng)態(tài)改變。描述符必須是這兩種形式之一，但二者不能共存，不然會(huì)出現(xiàn)異常。（關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://githu...

MonoLog 2019-08-23 12:41 評(píng)論0 收藏0
【Vue原理】Props - 源碼版

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

light 2019-08-23 18:32 評(píng)論0 收藏0
前端每周清單第 34 期：Vue 現(xiàn)狀盤點(diǎn)與 3.0 展望，React 代碼遷移與優(yōu)化，圖片優(yōu)化詳論

摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會(huì)談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會(huì)拖慢性能，過度的性能優(yōu)化反而會(huì)有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評(píng)論0 收藏0