这次开始学习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。