VUE源码笔记之new Vue

537 阅读1分钟

这次开始学习vue源码的知识,并且把学习的内容都写成笔记,方便以后复习。

这几节最后应该合并起来看,串联后是实现数据驱动的代码,写好了会补上链接

一、VUE源码笔记之new Vue
二、VUE源码笔记之$mount实例挂载
三、VUE源码笔记之render
四、VUE源码笔记之createElement

本节的内容是:了解new Vue发生了什么。

1. new Vue

首先,会执行Vue原型链上的init方法,这个init方法是在initMixin中定义的,我们去看一下init方法。

我们分块来看init方法,init先统计了uid,然后合并了配置。

接着进行初始化生命周期,初始化事件中心,初始化渲染,初始化data、props、computed、watcher 等等。

我们这次先看一下initState,其他的放在以后再看。

initState先初始化props,methods和data,再看initData

看initData会检查传入的data的是不是一个对象,如果不是一个对象就抛出一个警告。

接着遍历data中的key,如果和props或者methods中有重名就抛出一个警告。

如果没有重名,就会进行对每一个key进行proxy操作。

proxy方法就是利用Object.defineProperty对vm进行set和get代理,这样我们在vue中使用this.message就可以访问到data中的message,(实际上this.message等价于this._data.message)。

最后init执行了$mount实例挂载,挂载的目标就是把模板渲染成最终的 DOM。

参考

Vue.js 技术揭秘