简单描述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

在这里插入图片描述
接下来就拿到datakey值和prop以及methods的值,做一个对比。比如说如果在data中定义了message这个变量,那么接下来就不能在propmethods中定义这个变量,因为他们最终都挂载到vm上,也就是this,是Vue。这个主要是通过proxy(vm, '_data' , key)来实现的,proxy是一层代理
在这里插入图片描述
通过sharedPropertyDefinition对象定义的getset这两个函数和Object.defineProperty(target, key, sharedPropertyDefinition)这个target就是传入的vm,sourceKey就是传入的_datakey是传入的message,所以最后通过this[sourceKey][key]相当于this._data.message拿到值

Logo

前往低代码交流专区

更多推荐