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

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

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

目標

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

基石

屬性攔截器

操作對象

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]);
        }
    }
}

GPU云服務器云服務器響應式響應式布局響應式網(wǎng)站響應式設計

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96837.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

CoderStudy 2019-08-21 16:56 評論0 收藏0