前言

前面两篇文章总结了 Vue 开发的大部分技巧和内容，最后一篇文章来对它进行一个收尾

这篇文章我们来谈谈一些 Vue 理解和实践要求高一点的问题

首先是生命周期这一块内容，随着实践越多它的意义越大，理解也越深刻

mixin 功能强大，对代码复用组织都有很高的要求，算是 Vue 后期发力的高级技巧

服务端渲染可能是学习 Vue 最后一块阵地了，对于 SPA 框架的一个里程碑

最后，总结一下我在使用 Vue 中使用的技巧和经验

常规操作，先点赞后观看哦！你的点赞是我创作的动力之一！

前情提要

我将从 16 个方面来论述 Vue 开发过程中的一些技巧和原理。如果你还未观看上节文章，可以移步至

本篇概览

Vue 生命周期

什么是 Vue 生命周期？

Vue 生命周期大概就是：一个从 Vue 实例的创建到组件销毁的一个的过程。

具体情况下，我们分为几个核心的阶段，并且每个阶段都有一套钩子函数来执行我们需要的代码。

生命周期阶段与钩子

我们整理分类一下这些生命周期钩子，为了记忆方便分为 4 大核心阶段：

方便读者记忆，这里尽量使用图示：

可以看到每一个阶段中的钩子命名都很好记忆，阶段开始前使用 beforeXxx，阶段后结束后使用xxxed

除这 8 个核心钩子，另外还有 3 个新增功能型钩子，目前总共是 11 个钩子顺带提一下这 3 个钩子的功能

组件缓存，activated 与 deactivated，这两个钩子也是一对的，分别表示被 keep-alive 缓存的组件激活和停用时调用。
组件错误捕获，errorCaptured，对组件中出现对异常错误进行处理，使用较少。

图解生命周期

我们看看官方的图解，在 Vue 教程实例这节 官方教程直接跳转

官方图解

官方图解并没有详细解释这张图。我猜一方面原因是这个图里面涉及的细节都是在 vue 源码里面体现，要真正解释起来也没那么简单。另一方面是希望我们多在实践中去理解里面的意义。

Vue 源码基本流程

对于上面那张图的理解，我们需要对 Vue 源码进行梳理，才能真正的理解。大概根据现有的源码，我梳理了一下大致的流程：

我们可以清楚地看到，从 Vue 实例创建、组件挂载、渲染的一些过程中，有着明显的周期节点。

简化文字图解

结合上面源码的流程和相关实践，简化每一个阶段做了哪些时期，每一个钩子里面是组件处于什么状态。

实践验证一下生命周期

提出问题

下面我们提出一些问题：

什么时期创建 el ？
什么时期挂载 data ？
什么时期可以访问 dom ？
什么情况下组件会更新？更新是同步更新还是异步更新？
什么情况下组件会被销毁？
销毁组件后，还可以访问哪些内容？

编写代码

首先写一个小 demo，打印关键组件信息




复制代码

增加核心的 8 个生命周期钩子，分别调用打印方法

  // ...
  beforeCreate() {
    this.printComponentInfo('beforeCreate')
  },
  created() {
    this.printComponentInfo('created')
  },
  beforeMount() {
    this.printComponentInfo('beforeMount')
  },
  mounted() {
    this.printComponentInfo('mounted')
  },
  beforeUpdate() {
    this.printComponentInfo('beforeUpdate')
  },
  updated() {
    this.printComponentInfo('updated')
  },
  beforeDestroy() {
    this.printComponentInfo('beforeDestroy')
  },
  destroyed() {
    this.printComponentInfo('destroyed')
  },
  // ...
复制代码

创建阶段

beforeCreate 中methods中方法直接报错无法访问，直接访问 el 和 data 后

发现只能访问到 watch， el 和 data 均不能访问到

created 时期 el 无法访问到，但是可以访问到 data 了

挂载阶段

beforeMount 中可以访问 data 但是仍然访问不到 el

mounted 中可以访问到 el 了

首次加载页面，更新阶段和销毁阶段到钩子都未触发

更新阶段

我们增加一行代码

this.message = this.message + 1
复制代码

如果增加在 created 阶段，发现 update钩子仍然未触发，但是 el 和 data 的值都变成了 2

如果增加在 mounted 阶段，发现 update钩子此时触发了

销毁阶段

怎样触发销毁的钩子呢？大概有这几种方法

手动调用 $destory
v-if 与 v-for 指令，（v-show 不行）
路由切换和关闭或刷新浏览器我们在 mounted 钩子里面增加一行代码手动销毁当前组件，或者跳转路由

this.$destory('lifecycle')
复制代码

发现beforeDestory 和 destoryed 都触发了，而且el、data都一样还是可以访问到

生命周期钩子常见使用的场景

beforeCreate 谨慎操作 this

beforeCreate 无法访问到 this 中的 data、method

// 错误实例
beforeCreate() {
    // 允许
    console.log('ok')
    // 不允许
    this.print() // 报错找不到
    this.message = 1 // 报错找不到

}
复制代码

请求应放在 created 钩子中

created 可以访问 this，但无法访问 dom，dom 未挂载

created() {
    // 允许并推荐
    this.$http.get(xxx).then(res => {
        this.data = res.data
    })
    // 不允许
    this.$el
    this.$ref.demo
    const a = document.getElementById('demo')
}
复制代码

操作 DOM 代码应放在 mounted 钩子中

mounted 已经挂载 dom，可以访问 this

mounted() {
    // 允许
    this.$el
    this.$ref.demo
    let a = document.getElementById('')
}
复制代码

生命周期相关demo 代码见github-lifecycle-demo

理解并合理使用 mixin

什么是 mixin（混入）

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项大致原理就是将外来的组件、方法以某种方式进行合并。合并的规则有点像继承和扩展。

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”

我们看一下一个组件里面有哪些东西是可以合并的

// mixins/demo
export default {
    data() {
        return {}
    },
    mounted() {},
    methods: {},
    computed: {},
    components: {},
    directives: {}
}
复制代码

data、methods、computed、directives、components 生命周期钩子

没错这些都可以混入

import demoMixin form '@/mixins/demo'
export default {
    mixins: [demoMixin]
}
复制代码

这样看来，很多页面重复的代码我们都可以直接抽取出来

或者是封装成一个公共的 mixin

比如我们做 H5 页面，里面很多短信验证的逻辑固有逻辑，但是需要访问到 this。使用工具函数肯定不行。

这时候就可以考虑使用 mixin，封装成一个具有响应式的模块。供需要的地方进行引入。

mixin 规则

首先是优先级的问题，当重名选项时选择哪一个为最后的结果

默认规则我这里分为 3 类

data 混入: 以当前组件值为最后的值
生命周期钩子: 保留所有钩子，先执行 mixins 的，后执行当前组件的
methods、computed、directives、components 这种健值对形式，同名key，统统以当前组件为准

当然如果想改变规则，也可以通过配置来改变规则

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}
复制代码

mixin 的好处

我们知道 Vue 最能复用代码的就是组件。一般情况，我们通过 props 来控制组件的，将原有组件封装成 HOC 高阶组件。而控制 props 的生成不一样的功能的代码还是写在基础组件里。

瑞岁编程网

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】