Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to understand the life cycle of Vue. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Foreword:

Each Vue instance goes through a series of initialization processes before it is created. For example, you need to set up data listening, compile templates, mount instances to DOM, update DOM when data changes, and so on. At the same time, some functions called lifecycle hooks are run in the process, giving users the opportunity to add their own code in certain scenarios.

The function in the source code that finally executes the life cycle is to call the callHook method, which is defined in src/core/instance/lifecycle:

Export function callHook (vm: Component, hook: string) {/ / # 7573 disable dep collection when invoking lifecycle hooks pushTarget () 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`) } } } if (vm._hasHookEvent) { vm.$emit('hook:' + hook) } popTarget()} callHook 函数的逻辑很简单，根据传入的字符串 hook，去拿到 vm.$options[hook] 对应的回调函数数组，然后遍历执行，执行的时候把 vm 作为函数执行的上下文。 1、beforeCreate & created beforeCreate 和 created 函数都是在实例化 Vue 的阶段，在 _init 方法中执行的，它的定义在 src/core/instance/init.js 中： Vue.prototype._init = function (options?: Object) { // ... 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') // ...} 可以看到 beforeCreate 和 created 的钩子调用是在 initState 的前后，initState 的作用是初始化 props、data、methods、watch、computed 等属性，之后我们会详细分析。那么显然 beforeCreate 的钩子函数中就不能获取到 props、data 中定义的值，也不能调用 methods 中定义的函数。 在这俩个钩子函数执行的时候，并没有渲染 DOM，所以我们也不能够访问 DOM，一般来说，如果组件在加载的时候需要和后端有交互，放在这俩个钩子函数执行都可以，如果是需要访问 props、data 等数据的话，就需要使用 created 钩子函数。之后我们会介绍 vue-router 和 vuex 的时候会发现它们都混合了 beforeCreatd 钩子函数。 2、beforeMount & mounted 顾名思义，beforeMount 钩子函数发生在 mount，也就是 DOM 挂载之前，它的调用时机是在 mountComponent 函数中，定义在 src/core/instance/lifecycle.js 中： export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component { vm.$el = el // ... callHook(vm, 'beforeMount') let updateComponent /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { updateComponent = () =>

{const name = vm._name const id = vm._uid const startTag = `vue-perf-start:$ {id} `const endTag = `vue-perf-end:$ {id}` mark (startTag) const vnode = vm._render () mark (endTag) measure (`vue ${name} rende r`, startTag, endTag) mark (startTag) vm._update (vnode, hydrating) mark (endTag) measure (`vue ${name} patch` StartTag, endTag)}} else {updateComponent = () = > {vm._update (vm._render (), hydrating)}} / / we set this to vm._watcher inside the watcher's constructor / / since the watcher's initial patch may call $forceUpdate (e.g. Inside child / / component's mounted hook), which relies on vm._watcher being already defined new Watcher (vm, updateComponent, noop {before () {if (vm._isMounted) {callHook (vm, 'beforeUpdate')}}, true / * isRenderWatcher * /) hydrating = false / / manually mounted instance, call mounted on self / / mounted is called for render-created child components in its inserted hook if (vm.$vnode = = null) {vm._isMounted = true callHook (vm,' mounted')} return vm}

Executing vm. The render () function executes the beforeMount hook function before rendering VNode, and after executing vm. After update () puts the VNode patch into the real DOM, it executes the mouted hook. Note that there is a judgment logic for the execution of the mouted hook function. If vm.$vnode is null, it indicates that this is not a component initialization process, but that we initialize it through an external new Vue. So where is the mounted timing for components?

After the VNode patch of the component is passed to DOM, the invokeInsertHook function is executed, and the hook function saved in insertedVnodeQueue is executed in turn, which is defined in src/core/vdom/patch.js:

Function invokeInsertHook (vnode, queue, initial) {/ / delay insert hooks for component root nodes, invoke them after the / / element is really inserted if (isTrue (initial) & & isDef (vnode.parent)) {vnode.parent.data.pendingInsert = queue} else {for (let I = 0; I

< queue.length; ++i) { queue[i].data.hook.insert(queue[i]) } }} 该函数会执行 insert 这个钩子函数，对于组件而言，insert 钩子函数的定义在 src/core/vdom/create-component.js 中的 componentVNodeHooks 中： const componentVNodeHooks = { // ... insert (vnode: MountedComponentVNode) { const { context, componentInstance } = vnode if (!componentInstance._isMounted) { componentInstance._isMounted = true callHook(componentInstance, 'mounted') } // ... },} 我们可以看到，每个子组件都是在这个钩子函数中执行 mouted 钩子函数，并且我们之前分析过，insertedVnodeQueue 的添加顺序是先子后父，所以对于同步渲染的子组件而言，mounted 钩子函数的执行顺序也是先子后父。 3、beforeUpdate & updated 顾名思义，beforeUpdate 和 updated 的钩子函数执行时机都应该是在数据更新的时候，到目前为止，我们还没有分析 Vue 的数据双向绑定、更新相关，下一章我会详细介绍这个过程。 beforeUpdate 的执行时机是在渲染 Watcher 的 before 函数中 export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component { // ... // we set this to vm._watcher inside the watcher's constructor // since the watcher's initial patch may call $forceUpdate (e.g. inside child // component's mounted hook), which relies on vm._watcher being already defined new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */) // ...} 注意这里有个判断，也就是在组件已经 mounted 之后，才会去调用这个钩子函数。 update 的执行时机是在flushSchedulerQueue 函数调用的时候, 它的定义在 src/core/observer/scheduler.js 中： function flushSchedulerQueue () { // ... // 获取到 updatedQueue callUpdatedHooks(updatedQueue)} function callUpdatedHooks (queue) { let i = queue.length while (i--) { const watcher = queue[i] const vm = watcher.vm if (vm._watcher === watcher && vm._isMounted) { callHook(vm, 'updated') } }} flushSchedulerQueue 函数我们之后会详细介绍，可以先大概了解一下，updatedQueue 是 更新了的 wathcer 数组，那么在 callUpdatedHooks 函数中，它对这些数组做遍历，只有满足当前 watcher 为 vm._watcher 以及组件已经 mounted 这两个条件，才会执行 updated 钩子函数。 我们之前提过，在组件 mount 的过程中，会实例化一个渲染的 Watcher 去监听 vm 上的数据变化重新渲染，这断逻辑发生在 mountComponent 函数执行的时候： export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component { // ... // 这里是简写 let updateComponent = () =>

{vm._update (vm._render (), hydrating)} new Watcher (vm, updateComponent, noop, {before () {if (vm._isMounted) {callHook (vm, 'beforeUpdate')}, true / * isRenderWatcher * /) / /.}

In the process of instantiating Watcher, isRenderWatcher is judged in its constructor, and then the instance of the current watcher is assigned to vm._watcher, which is defined in src/core/observer/watcher.js:

Export default class Watcher {/ /... Constructor (vm: Component, expOrFn: string | Function, cb: Function, options?:? Object, isRenderWatcher?: boolean) {this.vm = vm if (isRenderWatcher) {vm._watcher = this} vm._watchers.push (this) / /.}}

At the same time, the current wathcer instance is push to vm. In watchers, vm. Watcher is specifically used to listen for data changes on vm and then re-render, so it is a rendering-related watcher, so in the callUpdatedHooks function, the updated hook function is executed only after the callback of vm._watcher is completed.

4. BeforeDestroy & destroyed

As the name implies, the timing of execution of the beforeDestroy and destroyed hook functions is at the stage of component destruction. The process of component destruction is described in detail, and the $destroy method is finally called, which is defined in src/core/instance/lifecycle.js:

Vue.prototype.$destroy = function () {const vm: Component = this if (vm._isBeingDestroyed) {return} callHook (vm, 'beforeDestroy') vm._isBeingDestroyed = true / / remove self from parent const parent = vm.$parent if (parent & &! parent._isBeingDestroyed & &! vm.$options.abstract) {remove (parent.$children) Vm)} / / teardown watchers if (vm._watcher) {vm._watcher.teardown ()} let I = vm._watchers.length while (iMel -) {vm._ watchers [I] .teardown ()} / / remove reference from data ob / / frozen object may not have observer. If (vm._data.__ob__) {vm._data.__ob__.vmCount--} / / call the last hook... Vm._isDestroyed = true / / invoke destroy hooks on current rendered tree vm.__patch__ (vm._vnode, null) / / fire destroyed hook callHook (vm, 'destroyed') / / turn off all instance listeners. Vm.$off () / / remove _ _ vue__ reference if (vm.$el) {vm.$el.__vue__ = null} / / release circular reference (# 6759) if (vm.$vnode) {vm.$vnode.parent = null}}

The execution time of the beforeDestroy hook function is at the beginning of the execution of the destroy function, followed by a series of destruction actions, including deleting itself from the children of parent, deleting watcher, and the currently rendered VNode executes the destroy hook function, etc., and then calls the destroy hook function after execution.

During the execution of $destroy, it executes vm. Patch (vm._vnode, null) triggers the destroy hook function of its child component, which is called recursively layer by layer, so the destroy hook function is executed in the same order as the mounted procedure.

5. Activated & deactivated

The activated and deactivated hook functions are specially tailored for keep-alive components. We will cover them in detail when we introduce keep-alive components, leaving a bit of suspense here.

For example, data can be accessed in the created hook function, DOM can be accessed in the mounted hook function, and timer destruction can be done in the destroy hook function. Understanding them is helpful for us to do different things in the appropriate life cycle.

The above is the editor for you to share how to understand the life cycle in Vue, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.