【Vue原理】代理 Data - 源码版

最新推荐文章于 2022-01-09 17:06:51 发布

神仙朱

最新推荐文章于 2022-01-09 17:06:51 发布

阅读量530

点赞数 1

分类专栏： Vue原理文章标签： Vue javascript 前端框架源码

本文链接：https://blog.csdn.net/qq_27460969/article/details/88682284

版权

Vue原理专栏收录该内容

57 篇文章 16 订阅

订阅专栏

本文探讨Vue框架中如何通过实例直接访问data数据的原理，主要围绕2.5.17版本的Vue源码展开。文章指出，Vue通过`initData`初始化数据并保存到实例，随后进行数据代理，避免了React中访问state需要额外一层的不便。通过`Object.defineProperty`设置get和set，实现数据的响应式，确保数据统一、不影响依赖收集和更新。

摘要由CSDN通过智能技术生成

专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧

研究基于 Vue版本2.5.17

如果你觉得排版难看，请点击下面链接或者关注公众号

【Vue原理】代理 Data - 源码版

公众号

写这篇文章，我就是为了记录我对 Data 的一个疑问的探索，很简短

data 的数据是怎么可以通过实例直接访问的？

第一想法，或许是，遍历逐个复制？

但是其实并不是，这里涉及的一个词，叫【代理】

怎么代理呢？听我慢慢说，抓住逐个疑问，跟着我慢慢探索

1初始化数据

实例使用 initData 初始化数据，如下


function initData(vm) {    

    var data = vm.$options.data;    

    var keys = Object.keys(data);    

    var i = keys.length;

   data = vm._data =

        ( typeof data === 'function' ?

            data.call(vm) : data ) || {};    



    while (i--) {        

        var key = keys[i];        

        if (只要不是_和$开头的属性) {

           proxy(vm, "_data", key);        
}    
} }

首先，拿到 data 数据，如果data 是函数，就执行拿到返回值，否则直接拿设置的对象data

第二，保存data 数据

源码中你可以看到，把 data 保存到实例上了

vm._data = 
    typeof data === 'function' ? 
        data.call(vm) : data

初始化数据，是为了拿到数据，然后放到存到实例上，作为代理总部

2代理开花

接下来，就放大招了，到了【data 代理】 的重点了，看上面的源码最后

会遍历data对象，如果属性名不是 【_ 或者 $】 开头的话，就会被设置代理

至于为什么避开那两个开头的属性？

Vue官网也说明了

剩下的其他属性，会被设置代理，现在我们来看设置代理的那句话

proxy(vm,"_data",key)

proxy 是什么？不要急，等我放上源码

function proxy(target, sourceKey, key) {    

    Object.defineProperty(target, key, {

       get() {            

            return this[sourceKey][key]

       },

       set(val) {            

            this[sourceKey][key] = val;

       }    }); }

明白吗？通过 Object.defineProperty 设置 get 和 set 函数，来达到代理，移花接木的过程

可能这么看不太直观，我以一个属性为例写清楚点