Vue2生命周期

zxuanxuanz

已于 2023-11-10 18:02:04 修改

阅读量300

点赞数

文章标签： vue

于 2019-04-17 13:48:42 首次发布

本文链接：https://blog.csdn.net/qq_40542728/article/details/88180140

版权

一、vue2生命周期图

二、vue2生命周期源码分析

初始化

Vue.prototype._init = function(options){
    //合并options属性
	vm.$options = mergeOptions(
		resolveConstructorOptions(vm.constructor),
		options || {},
		vm
	)
    //初始化一些实例属性如：$parent、$root、$children、$refs等
	initLifecycle(vm);
    //初始化事件：指将父组件在模板中使用的v-on注册的事件添加到子组件的事件系统（Vue.js的事件系统）中
	initEvents(vm);
    //初始化渲染相关如 $createElement，并且定义了 $attrs 和 $listeners 为浅层响应式属性。
    //定义了$slots、$scopedSlots等
	initRender(vm);
	callHook(VM,'beforeCreate');
    //初始化inject
	initInjections(vm);
    //初始化状态：props、methods、data、computed和watch
	initState(vm);
    //初始化provide
	initProvide(vm);
	callHook(vm,'created');
 
	//如果用户在实例化Vue.js时传递了el选项，则自动开启模板编译阶段与挂载阶段
	//如果没有传递el选项，则不进入下一个生命周期流程
	//用户需要执行vm.$mount方法，手动开启模板编译阶段与挂载阶段
 
	if(vm.$options.el){
		vm.$mount(vm.$options.el);
	}
}

挂载

1、在不同的构建版本中，vm.$mount的表现都不一样。其差异主要体现在完整版（vue.js）和只包含运行时版本（vue.runtime.js）之间。

2、完整版和只包含运行时版本之间的差异在于是否有编译器，而是否有编译器的差异主要在于vm.$mount方法的表现形式。

3、在只包含运行时的构建版本中，vm.$mount的作用如前面所述。而在完整的构建版本中，vm.$mount的作用会稍有不同，它首先会检查template或el选项所提供的模板是否已经转换成渲染函数（render函数）。如果没有，则立即进入编译过程，将模板编译成渲染函数，完成之后再进入挂载与渲染的流程中。

4、只包含运行时版本的vm.$mount没有编译步骤，它会默认实例上已经存在渲染函数，如果不存在，则会设置一个。并且，这个渲染函数在执行时会返回一个空节点的VNode，以保证执行时不会因为函数不存在而报错。同时如果是开发环境下运行，Vue.js会触发警告，提示我们当前使用的是只包含运行时的版本，会让我们提供渲染函数，或者去使用完整的构建版本。

5、从原理的角度来讲，完整版和只包含运行时版本之间是包含关系，完整版包含只包含运行时版本。

完整版：需要模板编译过程

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
	el = el && query(el);
	const options = this.$options;
	if(!options.render){
		<!-- 新增获取模板相关逻辑 -->
		let template = options.template;
		if(template){
 
		}else if(el){
			template = getOuterHTML(el);
		}
	}
    return mount.call(this,el);
}

运行时版本：

Vue.prototype.$mount = function(el){
	el = el && inBrower ? query(el) : undefined;
	return mountComponent(this,el);
}

export function mountComponent(vm,el){
	if(!vm.$options.render){
		vm.$options.render = createEmptyVNode;
		if(process.env.NODE_ENV !== 'production'){
			<!-- 在开发环境发出警告 -->
		}
		<!-- 触发生命周期钩子 -->
		callHook(vm,'beforeMount');
		<!-- 挂载 -->
		vm._watcher = new Watcher(vm,()=>{
			vm._update(vm._render())
		},noop);
		<!-- 触发生命周期钩子 -->
		callHook(vm,'mounted');
		return vm;
	}
}
1、vm._update作用：调用虚拟DOM中的patch方法来执行节点的比对与渲染操作。

2、vm._render作用：执行渲染函数，得到一份新的VNode节点树。

3、vm._update(vm._render())作用：先调用渲染函数得到一份最新的VNode节点树，然后通过vm._update

销毁

Vue.prototype.$destory = function(){
	const vm = this;
	<!-- 防止重复销毁 -->
	if(vm._isBeingDestroyed){
		return;
	}
	<!-- 调用钩子函数beforeDestroy -->
	callHook(vm,"beforeDestroy");
	vm._isBeingDestroyed = = true;
	<!-- 删除自己与父级之间的连接 -->
	const parent = vm.$parent;
	if(parent && !parent._isBeingDestroyed && !vm.$options.abstract){
		remove(parent.$children,vm);
	}
	<!-- 从watcher监听的所有状态的依赖列表中移除watcher -->
	if(vm._watcher){
		vm._watcher.teardown();
	}
	let i = vm._watchers.length;
	<!-- 将从vm.$watcher创建的watcher实例从它所监听的状态的依赖列表中移除 -->
	while(i--){
		vm._watchers[i].teardown();
	}
	<!-- 表示实例已经被销毁 -->
	vm._isDestroyed = true;
	<!-- 将模板中的所有指令解绑 -->
	vm._patch_(vm._vnode,null)
	<!-- 触发destroyed钩子函数 -->
	callHook(vm,'destroyed')
	<!-- 移除实例上的所有事件监听器 -->
	vm.$off();
}

三、生命周期的作用

Vue.js生命周期可以分为4个阶段：

初始化阶段（new Vue()->created）:主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等
模板编译阶段(created->beforeMounted):主要目的是将模板编译为渲染函数，只存在于完整版中。
挂载阶段(beforeMount->mounted):Vue.js会将其实例挂载到DOM元素上，通俗地讲，就是讲模板渲染到指定的DOM元素中。在挂载的过程中，Vue.js会开启Watcher来持续追踪依赖的变化。
卸载阶段(beforeDestory->destoryed)：Vue.js会将自身从父组件中删除，取消实例上所有依赖的追踪并且移除所欲的事件监听器

new Vue()=>beforeCreate:

1、initLifecycle：初始化一些实例属性如：$parent、$root、$children、$refs等。

2、initEvents：初始化事件相关的属性：指将父组件在模板中使用的v-on注册的事件添加到子组件的事件系统（Vue.js的事件系统）中。

3、initRender：vm 添加了一些虚拟 dom、slot 等相关的属性和方法。

beforeCreate=>created

1、initInjections：初始化inject

2、initState：初始化状态：props、methods、data、computed和watch

3、initProvide：初始化provide

created=>beforeMount

1、主要目的为将模板编译为渲染函数。

2、如果用户没有通过template选项设置模板，那么会从el选项中获取HTML字符串当作模板。

beforeMount=》mounted

1、Vue.js会将其实例挂载到DOM元素上，通俗地讲，就是将模板渲染到指定的DOM元素中。

2、在挂载的过程中，Vue.js会开启Watcher来持续追踪依赖的变化。

五、生命周期实现原理

（1）Vue.js通过callHook函数来触发生命周期钩子。

（2）callHook的作用是触发用户设置的生命周期钩子，而用户设置的生命周期钩子会在执行new Vue（）时通过参数传递给Vue.js。也就是说，可以在Vue.js的构造函数中通过options参数得到用户设置的生命周期钩子。

（3）用户传入的options参数最终会与构造函数的options属性合并并生成新的options并赋值到vm.$options属性中，所以可以通过vm.$options得到用户设置的生命周期函数。例如，通过vm.$options.created得到用户设置的created钩子函数。

（4）Vue.js在合并options的过程中会找出options中所有key是钩子函数的名字，并将它转换成数组。

（5）实现原理：只需要从vm.$options中获取生命周期钩子列表，遍历列表，执行每一个生命周期钩子，就可以触发钩子函数。

export function callHook(vm,hook){
	const handlers = vm.$options[hook];
	if(handlers){
		for(let i = 0,j = handlers.length ; i<j;i++){
			try{
				handlers[i].call(vm);
			}catch(e){
				handleError(e,vm,'${hook}hook')
			}
 
		}
	}
}

六、不常用生命周期

activated： keep-alive 组件激活时调用，该钩子在服务器端渲染期间不被调用。
deactivated ：keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用。
errorCaptured ：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

七、vue3生命周期

onBeforeMount()：注册一个钩子，在组件被挂载之前被调用。
onMounted()：注册一个回调函数，在组件挂载完成后执行
onBeforeUpdate()：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onUpdated()：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onBeforeUnmount()：注册一个钩子，在组件被挂载之前被调用。
onUnmounted()：注册一个回调函数，在组件实例被卸载之后调用。

onErrorCaptured()：注册一个钩子，在捕获了后代组件传递的错误时调用。
onRenderTracked()：注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。（这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。）
onRenderTriggered()：注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。（这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。）
onActivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
onDeactivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
onServerPrefetch()：注册一个异步函数，在组件实例在服务器上被渲染之前调用。（SSR only）

与 vue2 的 options API 区别：

写法区别，都变成on+Name。
composition API 提供了 setup 函数作为入口函数，替换了 beforeCreate 和 created 这两个生命周期钩子。所以在实际开发中，我们可以简单的把 setup 理解为 created 进行使用。
beforeDestroy -> beforeUnmount、Destoryed -> Unmounted。
提供了两个可用于调试目的的钩子：onRenderTracked和onRenderTriggered。（仅在开发模式下可用）
提供了SSR专用生命周期onServerPrefetch。

原理

Vue3的生命周期Hooks函数的实现原理还是比较简单的，就是把各个生命周期的函数挂载或者叫注册到组件的实例上，然后等到组件运行到某个时刻，再去组件实例上把相应的生命周期的函数取出来执行。

（1）生命周期类型

// packages/runtime-core/src/component.ts
export const enum LifecycleHooks {
    BEFORE_CREATE = 'bc', // 创建之前
    CREATED = 'c', // 创建
    BEFORE_MOUNT = 'bm', // 挂载之前
    MOUNTED = 'm', // 挂载之后
    BEFORE_UPDATE = 'bu', // 更新之前
    UPDATED = 'u', // 更新之后
    BEFORE_UNMOUNT = 'bum', // 卸载之前
    UNMOUNTED = 'um', // 卸载之后
	// ...
}

（2）各个生命周期Hooks函数的创建

// packages/runtime-core/src/apiLifecycle.ts
export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
export const onMounted = createHook(LifecycleHooks.MOUNTED)
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
export const onUpdated = createHook(LifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)

（3）创建生命周期函数createHook

// packages/runtime-core/src/apiLifecycle.ts
export const createHook = (lifecycle) => (hook, target = currentInstance) => injectHook(lifecycle, hook, target)

createHook是一个闭包函数，通过闭包缓存当前是属于哪个生命周期的Hooks,target表示该生命周期Hooks函数被绑定到哪个组件实例上，默认是当前工作的组件实例。createHook底层又调用了一个injectHook的函数。

（4） injectHook函数

injectHook是一个闭包函数，通过闭包缓存绑定对应生命周期Hooks到对应的组件实例上。

// packages/runtime-core/src/apiLifecycle.ts
export function injectHook(type, hook, target) {
    if(target) {
        // 把各个生命周期的Hooks函数挂载到组件实例上，并且是一个数组，因为可能你会多次调用同一个组件的同一个生命周期函数
        const hooks = target[type] || (target[type] = [])
        // 把生命周期函数进行包装并且把包装函数缓存在__weh上
        const wrappedHook =
        hook.__weh ||
        (hook.__weh = (...args: unknown[]) => {
          if (target.isUnmounted) {
            return
          }
            // 当生命周期调用时 保证currentInstance是正确的
            setCurrentInstance(target)
            // 执行生命周期Hooks函数
            const  res = args ? hook(...args) : hook()
            unsetCurrentInstance()
          return res
        })
        // 把生命周期的包装函数绑定到组件实例对应的hooks上
        hooks.push(wrappedHook)
        // 返回包装函数
        return wrappedHook
    }
}

首先拿到target（也就是组件实例）的对应类型的钩子函数的数组，比如目前注入的是onMounted钩子，对应类型m，那么我们先拿到hooks = target['m']，对应目前已经注册的onMounted钩子
然后把hook（也就是我们传给钩子函数的回调）和错误处理的内容包裹到了一起，从而得到wrappedHook，再把wrappedHook放到hooks当中

（5）生命周期Hooks的调用

按生命周期来分，不同的钩子函数回调的触发时机不同，例如：

onBeforeMount、onMounted：触发时机在mountComponent阶段，具体代码位于renderer.ts的setupRenderEffect函数中
onBeforeUpdate、onUpdated：触发时机在updateComponent阶段，代码同样位于setupRenderEffect函数中
onBeforeUnmount、onUnmounted：触发时机在unmountComponent阶段，代码位于unmountComponent函数中

按触发方式来分，可以分为同步和异步两类：

同步：onBeforeMount、onBeforeUpdate、onBeforeUnmount
异步：onMounted、onUpdated、onUnmounted

// 仅保留了钩子函数相关代码
const componentUpdateFn = () => {
  if (!instance.isMounted) {
    const { bm, m, parent } = instance
    // beforeMount hook
    if (bm) {
      invokeArrayFns(bm)
    }
    // mounted hook
    if (m) {
      queuePostRenderEffect(m, parentSuspense)
    }
  } else {
    // updateComponent
    let { next, bu, u, parent, vnode } = instance

    // beforeUpdate hook
    if (bu) {
      invokeArrayFns(bu)
    }
    // updated hook
    if (u) {
      queuePostRenderEffect(u, parentSuspense)
    }
  }
}

1、从代码可以看到，当实例还没有被挂载的情况下，组件实例上的bm和m会被解构出来，这两个变量就是onBeforeMounted和onMounted的钩子函数回调数组。

2、对于bm，invokeArrayFns函数以同步的形式对bm中的回调进行调用

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}

对于m，queuePostRenderEffect函数以异步的形式对m中的回调进行调用。

（6）vue3的调度机制

vue中的异步任务在执行时存在顺序关系，从先到后分别是pre > DOM更新 > post >
nextTick 通过调用queuePostRenderEffect，m会被添加到post这个时机的任务队列当中，从而异步地在post时机被执行

原因：

因为watch和计算属性的更新时机位于pre阶段，如果同步调用m的回调，就会导致在onMounted回调中无法访问到最新的值。并且onMounted本身也意味着DOM挂载后这个时点，因此理应在位于DOM更新时点之后的post节点，onUpdated和onUnmounted也是同理。

（7）小结

首先，关注点分离到了不同的文件当中。注入逻辑放在生命周期逻辑相关文件中，调用行为放在组件实例逻辑的文件中，具体的调度逻辑放在调度器的文件当中。
其次，这种设计方式利用了已有的底层机制（调度器），只为组件实例添加了一个属性（就是hooks数组），对已有的代码结构完全没有破坏性，就实现了生命周期钩子。

zxuanxuanz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2生命周期

1.beforeCreate组件实例刚刚被创建，组件属性计算之前，如data属性，el 和 data 并未初始化2.created组件实例创建完成，属性已绑定,但DOM还未生成，$el属性还不存在，完成了 data 数据的初始化，el没有数据已经和data属性进行绑定主要应用：调用数据，调用方法，调用异步函数3.beforeMount模版编译/挂载之前，完成了 ...
复制链接

扫一扫