vue源码分析-new Vue发生了什么

文章预览

Vue是function实现的class，当执行 new Vue() 的时候，会进入到这个function，执行 this._init() 初始化，同时传入options参数， _init 方法是在原型上挂载的方法，它是在什么时候被定义的呢？实际上我们初始化的时候下面会执行 initMixin() 混入，这个方法是在init.js中被定义的，方法中在原型上挂载 _init 方法

_init方法做了一堆初始化的操作，比如定义 uid ，合并 options ，它会把传入的 options 合并到 $options 等等，我们就可以通过 $options.el 访问的到代码中的 el ， $options.data 访问到代码中的 data

然后还初始化了一下生命周期，事件，render函数，state等等。一堆初始化操作结束之后判断当前的 $options.el 有没有el， el: '#app' 最终会转换成dom对象字符串，之后调用 $mount 挂载

我们在 data 中定义的 message 为什么可以在其他地方通过 this 访问到，实际上初始化的时候执行了 initState 方法，这个方法做了什么呢？
如果定义了 props 就初始化 props ,如果定义了 methods 就初始化 methods ，如果定义了 data 就调用 initData 初始化 data

initData 方法中，从 $options.data 中拿到拿到定义的 data 对象，之后判断这个对象是不是一个function，通过我们推荐 data 是一个函数return一个对象，如果 data 是一个函数就调用 getData 方法

里面返回了 data.call() 方法的调用，就是 data 中return的对象，除了赋值给 data 之外，还赋值给了 vm._data

如果判断 data 不是一个函数就报一个警告 data functions should return an object

接下来就拿到 data 的 key 值和 prop 以及 methods 的值，做一个对比。比如说如果在 data 中定义了 message 这个变量，那么接下来就不能在 prop 和 methods 中定义这个变量，因为他们最终都挂载到vm上，也就是this，是Vue。这个主要是通过 proxy(vm, '_data' , key) 来实现的， proxy 是一层代理

通过 sharedPropertyDefinition 对象定义的 get 和 set 这两个函数和 Object.defineProperty(target, key, sharedPropertyDefinition) 这个 target 就是传入的 vm ,sourceKey就是传入的 _data ， key 是传入的message，所以最后通过 this[sourceKey][key] 相当于 this._data.message 拿到值

………………………………