学习vue源码（19）四探生命周期之初始化props

本文链接：https://blog.csdn.net/weixin_43964148/article/details/106748903

本文详细探讨Vue.js组件的初始化props过程，包括props的设置、父组件如何传值给子组件的props，以及props的标准化处理和响应式创建。通过实例解析，帮助理解props的工作原理。

摘要由CSDN通过智能技术生成

前面文章已经把 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);
	}