Vue 響應式實現原理（個人在學習完Vue基礎的情況下的理解）

zsy888 發布于2019-08-20 19:00 / 1330人閱讀

摘要：對象用戶看到的對象用戶看到的是這個對象即是實際使用的對象實際使用的對象復制更新相應的代碼實現對象代理響應式原理前提官網說過，限于現代瀏覽器限制，無法監測通過這種方式添加的屬性，所以，他的響應式是建立在實例化對象的時候，預定義屬性的基礎上的。

1. Vue 對象 1.1 用戶看到的對象

var app = new Vue({
    el: "#app" , 
    /*
     * 用戶看到的是這個對象
     */
    data: {
        name: "chenxuelong" , 
        sex: "male"
    }
});

// 即是
console.log(app.data);

1.2 Vue 實際使用的對象

// Vue 實際使用的對象
app.$data = {};

for (var k in app.data)
{
    copy(k);
}

// 復制
function copy(k){
    Object.defineProperty(app.$data , k , {
        get: function(){
            return app.data[k];
        } , 
        set: function(value){
            app.data[k] = value;
            
            // 更新相應 dom 的代碼
        } ,
        enumerable: true , 
        configurable: true
    });
}

2. Vue 實現 data 對象代理

for (var k as app.$data)
{
    copy(k);   
}


function copy(k){
    Object.defineProperty(app , k , {
        get: function(){
            app.$data[k];
        } , 
        set: function(val){
            app.$data[k] = val;
        } , 
        enumerable: true , 
        configurable: true
    });
}

3. Vue 響應式原理 3.1 前提

Vue 官網說過，限于現代瀏覽器 JavaScript 限制，Vue 無法監測通過 app.test = "hello boy" 這種方式添加的屬性，所以，他的響應式是建立在實例化 Vue 對象的時候，預定義 data 屬性的基礎上的。

3.2 原理

// 必須在實例化 Vue 時，預定義好要用到的 data 屬性
// 否則實現不了響應式
var app = new Vue(
    el: "#app" , 
    // 這個時候，Vue 內部會新建一個 $data 屬性
    // 具體過程請看步驟 1.2
    // 然后實現 data 對象代理，具體過程請看
    // 步驟 2
    // 通過以上步驟后， data 對象中的數據屬性
    // 就都被轉化為 存取器屬性（getter/setter） 了
    // Vue 就是通過 getter/setter 來追蹤屬性變化的
    data: {
        name: "chenxuelong" , 
        sex: "male"
    }
);

GPU云服務器云服務器 vue基礎教程 VUE實現webrtc Vue實現分頁 vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85008.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
深入淺出Vue響應式原理

摘要：總結最后我們依照下圖參考深入淺出，再來回顧下整個過程在后，會調用函數進行初始化，也就是過程，在這個過程通過轉換成了的形式，來對數據追蹤變化，當被設置的對象被讀取的時候會執行函數，而在當被賦值的時候會執行函數。前言 Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解...

yiliang 2019-08-23 18:34 評論0 收藏0
前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

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

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