前面文章已经 把 created钩子函数触发前,beforeCreate触发后 的initInjections和initProvide讲完了,现在开始讲 initState的props部分。
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
……
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
}
如代码所示,这一部分,也是created钩子函数触发前,beforeCreate触发后的最后一部分了。
这一部分也叫做初始化状态
当我们使用Vue.js开发应用时,经常会使用一些状态,例如props、methods、data、computed和watch。在Vue.js内部,这些玩状态在使用之前需要进行初始化。
initState函数
export function initState(vm){
vm._watchers = [];
const opts = vm.$options;
if(opts.props) initProps(vm,opts.props);
if(opts.methods) initMethods(vm,opts.methods);
if(opts.data){
initData(vm);
}else{
<!-- 不存在,则直接使用observe函数观察空对象 -->
<!-- observe函数的作用是将数据转换为响应式的 -->
observe(vm._data = {
},true/*asRootData*/);
}
if(opts.computed) initComputed(vm,opts.computed);
if(opts.watch && opts.watch !== nativeWatch){
initWatch(vm,opts.watch);
}
1、首先在vm上新增一个属性_watchers,用来保存当前组件中所