【Vue.js 3.0源码】指令完整的生命周期

自我介绍：大家好，我是吉帅振的网络日志（其他平台账号名字相同）；互联网前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。

一、前言

Vue.js 的核心思想之一是数据驱动，数据是 DOM 的映射。在大部分情况下，不用操作 DOM 的，但是这并不意味着你不能操作 DOM。有些时候，我们希望手动去操作某个元素节点的 DOM，比如当这个元素节点挂载到页面的时候通过操作底层的 DOM 来做一些事情。为了支持这个需求，Vue.js提供了指令的功能，它允许我们自定义指令，作用在普通的 DOM 元素上。举个聚焦输入框的例子，我们希望在页面加载时，输入框自动获得焦点，我们可以全局注册一个 v-focus 指令：

import Vue from 'vue'
const app = Vue.createApp({})

// 注册全局 v-focus 指令
app.directive('focus', {
  // 挂载的钩子函数
  mounted(el) {
    el.focus()
  }
})

//当然，我们也可以在组件内部局部注册：
directives: {
  focus: {
    mounted(el) {
      el.focus()
    }
  }
}

二、指令的定义

指令本质上就是一个 JavaScript 对象，对象上挂着一些钩子函数，我们可以举个例子来说明，比如我定义一个 v-log 指令，这个指令做的事情就是在指令的各个生命周期去输出一些 log 信息：

const logDirective = {
  beforeMount() {
    console.log('log directive before mount')
  },
  mounted() {
     console.log('log directive mounted')
  },
  beforeUpdate() {
    console.log('log directiv