vue源码学习，new Vue都干了什么，beforeCreate，created，mounted触发前，都做了什么，执行顺序Props＞Setup＞Met＞Data＞Computed＞Watch

提示：Props>Methods>Data>Computed>Watch

---

前言

需求：触发beforeCreate状态后，执行顺序Props>Methods>Data>Computed>Watch ，再触发created状态

一、创建项目

1、new Vue();后，执行了_init方法

2、_init方法是引入vue.js文件后，initMixin$1初始化的方法
3、initMixin$1方法里执行了一些方法，按照顺序

	  //初始化生命周期
	  initLifecycle(vm);
	  //初始化事件
	  initEvents(vm);
	  //初始化mixin、extends       //全局 mixin 组件 extends 的基组件 组件级 mixin
	  initRender(vm);
	  //触发beforeCreate状态
	  callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);
	  //初始化取出provid          //在props和data初始化之前就可以使用（理解为取数据）
	  initInjections(vm);         // resolve injections before data/props
	  //初始化状态
	  initState(vm);
	  //初始化注入依赖            //在props和data初始化之后使用 （理解为存数据）
	  initProvide(vm);            // resolve provide after data/props
	  //触发created状态
	  callHook$1(vm, 'created');

initLifecycle初始化的内容;

 vm.$parent
 vm.$root
 vm.$children
 vm.$refs
 vm._provided
 vm._watcher
 vm._inactive
 vm._directInactive
 vm._isMounted
 vm._isDestroyed
 vm._isBeingDestroyed

initEvents初始化的内容

vm._events
vm._hasHookEvent

initRender初始化的内容

vm._vnode
vm._staticTrees
vm.$slots
vm.$scopedSlots
vm._c = function(){};
vm.$createElement = function(){};

initInjections初始化的内容，获取取_provided[provideKey]的值

initState初始化的内容

initProps
initSetup
initMethods
initData
initComputed
initWatch

触发beforeCreate状态后，执行顺序Props>Methods>Data>Computed>Watch ，再触发created状态

initProvide初始化的内容

vm.$options.provide

init之后触发created状态

二、生命周期

vue官方文档
1、beforeCreate​
在组件实例初始化完成之后立即调用。
2、created​
在组件实例处理完所有与状态相关的选项后调用。
3、beforeMount​
在组件被挂载之前调用。
4、mounted​
在组件被挂载之后调用。
5、beforeUpdate​
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
6、updated​
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
7、beforeUnmount​
在一个组件实例被卸载之前调用。
8、unmounted​
在一个组件实例被卸载之后调用。
9、errorCaptured​
在捕获了后代组件传递的错误时调用。
10、renderTracked ​
在一个响应式依赖被组件的渲染作用追踪后调用。
11、renderTriggered ​
在一个响应式依赖被组件触发了重新渲染之后调用。
12、activated​
若组件实例是 缓存树的一部分，当组件被插入到 DOM 中时调用。
这个钩子在服务端渲染时不会被调用。
13、deactivated​
若组件实例是 缓存树的一部分，当组件从 DOM 中被移除时调用。
这个钩子在服务端渲染时不会被调用。
14、serverPrefetch ​
当组件实例在服务器上被渲染之前要完成的异步函数。
# 三、vue节点vnode

 var VNode = function VNode (
    tag,
    data,
    children,
    text,
    elm,
    context,
    componentOptions,
    asyncFactory
  ) {
    this.tag = tag;
    this.data = data;
    this.children = children;
    this.text = text;
    this.elm = elm;
    this.ns = undefined;
    this.context = context;
    this.fnContext = undefined;
    this.fnOptions = undefined;
    this.fnScopeId = undefined;
    this.key = data && data.key;
    this.componentOptions = componentOptions;
    this.componentInstance = undefined;
    this.parent = undefined;
    this.raw = false;
    this.isStatic = false;
    this.isRootInsert = true;
    this.isComment = false;
    this.isCloned = false;
    this.isOnce = false;
    this.asyncFactory = asyncFactory;
    this.asyncMeta = undefined;
    this.isAsyncPlaceholder = false;
  };

总结

踩坑路漫漫长@~@