Vue.js响应式原理

caikeal 发布于2019-08-21 12:04 / 735人阅读

摘要：关于是一款框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。的响应式原理依赖于，尤大大在文档中就已经提到过，这也是不支持以及更低版本浏览器的原因。代理我们可以在的构造函数中为执行一个代理。

写在前面

因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。
文章的原地址：https://github.com/answershut...。
在学习过程中，为Vue加上了中文的注释https://github.com/answershut...，希望可以对其他想学习Vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。

关于Vue.js

Vue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持E8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

将数据data变成可观察（observable）的

那么Vue是如何将所有data下面的所有属性变成可观察的（observable）呢？

function observer(value) {
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive (obj, key, val, cb) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*....依赖收集等....*/
        },
        set:newVal=> {
            cb();/*订阅者收到消息的回调*/
        }
    })
}

class Vue {
    constructor(options) {
        this._data = options.data;
        observer(this._data, options.render)
    }
}

let app = new Vue({
    el: "#app",
    data: {
        text: "text",
        text2: "text2"
    },
    render(){
        console.log("render");
    }
})

为了便于理解，首先考虑一种最简单的情况，不考虑数组等情况，代码如上所示。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set，对订阅者进行回调（在这里是render）。

那么问题来了，需要对app._date.text操作才会触发set。为了偷懒，我们需要一种方便的方法通过app.text直接设置就能触发set对视图进行重绘。那么就需要用到代理。

代理

我们可以在Vue的构造函数constructor中为data执行一个代理proxy。这样我们就把data上面的属性代理到了vm实例上。

_proxy(options.data);/*构造函数中*/

/*代理*/
function _proxy (data) {
    const that = this;
    Object.keys(data).forEach(key => {
        Object.defineProperty(that, key, {
            configurable: true,
            enumerable: true,
            get: function proxyGetter () {
                return that._data[key];
            },
            set: function proxySetter (val) {
                that._data[key] = val;
            }
        })
    });
}

我们就可以用app.text代替app._data.text了。

关于

作者：染陌

Email：answershuto@gmail.com or answershuto@126.com

Github: https://github.com/answershuto

Blog：http://answershuto.github.io/

知乎专栏：https://zhuanlan.zhihu.com/ranmo

掘金： https://juejin.im/user/58f87ae844d9040069ca7507

osChina：https://my.oschina.net/u/3161824/blog

转载请注明出处，谢谢。

欢迎关注我的公众号

GPU云服务器云服务器响应式响应式布局响应式网站响应式设计

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

转载请注明本文地址：https://www.ucloud.cn/yun/87414.html

Vue 数据响应式原理

摘要：接下来，我们就一起深入了解的数据响应式原理，搞清楚响应式的实现机制。回调函数只是打印出新的得到的新的值，由执行后生成。及异步更新相信读过前文，你应该对响应式原理有基本的认识。前言 Vue.js 的核心包括一套响应式系统。响应式，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。举个简单的例子，对于模板： {{ name ...

Mike617 2019-08-23 11:46 评论0 收藏0
vue - 响应式原理梳理(一)

摘要：问题为什么修改即可触发更新和的关联关系官方介绍的官网文档，对响应式属性的原理有一个介绍。因此本文在源码层面，对响应式原理进行梳理，对关键步骤进行解析。描述我们通过一个简单的 Vue应用来演示 Vue的响应式属性： html： {{message}} js: let vm = new Vue({ el: #ap...

weknow619 2019-08-23 14:56 评论0 收藏0
[Vue.js进阶]从源码角度剖析计算属性的原理

摘要：前言最近在学习计算属性的源码，发现和普通的响应式变量内部的实现还有一些不同，特地写了这篇博客，记录下自己学习的成果文中的源码截图只保留核心逻辑完整源码地址可能需要了解一些响应式的原理版本计算属性的概念一般的计算属性值是一个函数，这个函数showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言最近在学习Vue计...

melody_lql 2019-05-23 17:30 评论0 收藏0
vue.js响应式原理解析与实现

摘要：今天，就我们就来一步步解析响应式的原理，并且来实现一个简单的。当然，这个也只是一个简单的，来说明响应式的原理，真实的源码会更加复杂，因为加了很多其他逻辑。接下来我可能会将其与联系起来，实现和语法。从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监...

Shihira 2019-08-26 12:24 评论0 收藏0