提示: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;
};
总结
踩坑路漫漫长@~@