Vue 响应式实现原理（个人在学习完Vue基础的情况下的理解）

zsy888 发布于2019-08-20 19:00 / 1311人阅读

摘要：对象用户看到的对象用户看到的是这个对象即是实际使用的对象实际使用的对象复制更新相应的代码实现对象代理响应式原理前提官网说过，限于现代浏览器限制，无法监测通过这种方式添加的属性，所以，他的响应式是建立在实例化对象的时候，预定义属性的基础上的。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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