vue源码分析-new Vue发生了什么
简单描述new Vue发生了什么Vue是function实现的class,当执行new Vue()的时候,会进入到这个function,执行this._init()初始化,同时传入options参数,_init方法是在原型上挂载的方法,它是在什么时候被定义的呢?实际上我们初始化的时候下面会执行initMixin()混入,这个方法是在init.js中被定义的,方法中在原型上挂载_init方法_ini
简单描述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
拿到值
更多推荐
所有评论(0)