全局配置_谈谈 Vue 3.0 的应用全局配置和生命周期钩子

前言

就在昨天，「Vue 3.0」宣布进入「Release Candidate」阶段，相应地也推出了 Vue 3.0官方文档。

虽然，目前只是英文版，但是推荐阅读，所谓笨鸟先飞，不要等到别人给你翻译出来再去看。

然后，今天我也把官方文档的 API 介绍给阅读了一遍。相比较「Vue 2x」版本，以及抛开在此之前经常讨论的「Reactivity」和「Composition」API，这里，我取出了两个有趣的点：

• 应用全局配置(Application Config)
• 生命周期钩子(Lifecycle hooks)

那么，接下来，我们就来认识一下这两者的有趣之处！

应用全局配置

在「Vue 3.0」中，我们可以通过使用 app.config 来设置应用全局的配置：

1. devtool(Vue Chrome 插件)

我们可以通过 devtool 来控制「Vue Chrome」插件的使用和禁止：

// 禁止使用
app.config.devtool = false

// 开启使用
app.config.devtool = false

app.config.devtool 在 development 模式下默认是 true 开启使用，在 production 模式下是 false 禁止使用。

2. errorHandler(错误处理)

我们可以通过 errorHanlder() 方法来捕获运行过程的错误：

app.config.errorHandler = (err, vm, info) => {
}

3. globalProperties(全局属性)

我们可以通过 globalProperties 设置应用全局的变量，这样在每一个组件中都可以通过 this 来访问到:

app.config.globalProperties.foo = 'bar'
app.config.globalProperties.$http = () => {}

app.component('child-component', {
 mounted() {
  console.log(this.foo)
 }
})

4. isCustomElement(自定义元素)

通常情况下，如果我们使用了不可识别的元素作为标签，会接收到 Unkown custom element 的异常。现在，我们可以通过设置 isCustomElement 来避免出现这样的异常，例如以 icon- 为前缀的元素

app.config.isCustomElement = tag => tag.startsWith('icon')

5. optionMergeStrategies(选项合并策略)

我们通常会存在使用 mixin() 来全局混入一个函数或变量，然后在本地可以如果 this 来访问混入的函数或变量。但是，有时候就会存在一个特殊情况，就是混入的变量与本地的变量名重复，而混入的逻辑并不是覆盖。默认情况下，它的本质是先执行本地变量相关的代码，然后再执行混入变量相同的代码。所以，这里就需要我们通过 optionMergeStrategies 合并的策略，设置同名情况下是只执行混入的变量情况代码，还是本地的变量情况的代码。

optionMergeStrategies 的类型定义：

{ [key: string]: Function }

即我们用合并策略处理一个混入的变量或函数，它的类型是一个函数，这个函数有三个参数：

• parent 表示本地的变量
• child 表示混入的变量
• vm 表示当前 Vue 实例

例如，我们在本地定义了一个 hello 变量，又混入了一个 hello 变量，然后我们通过合并策略让本地 mounted() 钩子中访问 hello 变量时输出的是本地的 hello 变量值：

const app = Vue.createApp({
  hello: 'local hello'
  mounted() {
   console.log(this.$options.hello)
  }
})

app.config.optionMergeStrategies.hello = (parent, child, vm) => {
  // parent local hello
  // child mixin hello
 return parent
}

app.mixin({
 hello: 'mixin hello'
})

生命周期钩子

在「Vue 3.0」中，现在有 13 个生命周期钩子，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnMount、UnMount、activated、deactivated、errorCaptured、renderTracked 等(它们之间的关系如下图)。

可以看到，2x 中的 beforeDestory 和 destoryed 换成了 beforeUnMount 和 UnMount。并且，在原来的基础上还增加了 renderTracked 和 renderTriggered 这两个钩子函数。所以，这里我们看看它们两者的概念和使用：

1. renderTracked

它会在组件在渲染时调用，用于跟踪组件的渲染。例如，官网文档的案例，renderTracked 会在渲染时触发，然后会拿到一个 tracked 对象，用它来描述组件的渲染发生了什么。

const app = Vue.createApp({
 data() {
  return {
   cart: 0
  }
 },
 renderTracked({key, target, type}) {
  console.log({key, target, type})
  /* This will be logged when component is rendered for the first time:
     {
       key: "cart",
       target: {
         cart: 0
       },
       type: "get"
     }
     */
 },
 methods: {
  addToCart() {
   tihis.cart += 1
  }
 }
})

app.mount('#app')

2. renderTriggered

它会在 VNode 的重新渲染时调用，用于感知组件的重新渲染。例如，官网文档的案例，当 addToCart() 函数被调用时，renderTriggered 会在重新渲染时触发，然后会拿到一个参数 triggered，用来描述什么触发了组件的重新渲染。

const app = Vue.createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTracked({ key, target, type }) {
    console.log({ key, target, type })
  },
  methods: {
    addToCart() {
      this.cart += 1
      /* This will cause renderTriggered call
        {
          key: "cart",
          target: {
            cart: 1
          },
          type: "set"
        }
      */
    }
  }
})

app.mount('#app')

写在最后

很开心「Vue 3.0」进入「Release Candidate」阶段，在官方文档上的所有 API 已经是稳定状态。因此，这也意味着你可以放心地看它的源码，毕竟它还是有很多优点的，例如静态节点提升、靶向更新过程等等。所以，很好地取其所长可以提升自己各方面的能力，大家一起加油哈。

写作不易，如果你觉得有收获的话，可以帅气三连击！！！