Vue 实例生命周期

在之前的小节中我们介绍了 Vue 实例，本小节我们一起来了解一下 Vue 实例的生命周期。生命周期的几个阶段，以及各个阶段触发时机和作用。深入理解 Vue 的生命周期是本小节的难点，同学们不仅需要知道生命周期的执行顺序，还要理解各生命周期的作用。

每个 Vue 实例在被创建时都要经过一系列的初始化过程 —— 例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时个过程中也会运行一些叫做生命周期钩子的，这给了在不同阶段自己的的机会。 — 官方定义

Vue 生命周期是指 Vue 实例对象从创建之初到销毁的整个过程。在生命周期的不同阶段 Vue 提供了不同的，让可以在不同的阶段执行自己的。

我们来看一下官网给的 Vue 生命周期的图：

从上面这幅图中，我们可以看到 vue 生命周期可以分为八个阶段，分别是：

在实例初始化之后，此时的数据观察和事件机制都未形成，不能获得 DOM 节点。

实例已经创建完成之后被。一步，实例已完成以下的配置：数据观测（data observer），和的运算， watch/event 事件回调。然而，挂载阶段还没开始。

在挂载开始之前被：这个过程是在模版已经在内存中编译完成， render 首次被，此时完成了虚拟 DOM 的构建，但并未被渲染。

这个过程在模版挂载之后被，完成渲染，所以之后，我们可以操作和访问 DOM 元素。

当数据更新时，一阶段 DOM 会和更改过的同步。

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，之后会该钩子。

当这个钩子被时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

实例销毁之前。一步，实例仍然完全可用。

Vue 实例销毁后。后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    {{ name }}
    <button @click="updateName">更新</button>
    <button @click="destroy">销毁</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('准备名字啦！')
        this.name = 'hello ！'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此时数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate： undefined
    },
    created() {
      // 数据已经初始化
      console.log('created:' + this.name) // beforeCreate： hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate： hello !
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate： hello !
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() {
      console.log('beforeUpdate:' + this.name) // beforeCreate： hello ！
    },
    updated() {
      console.log('updated:' + this.name) // updated hello  !
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 之后点击 更新 按钮将无任何
    }
  });
</script>
</html>

本小节我们介绍了 Vue 的生命周期，了解了 Vue 从创建到销毁的过程。

←Vue过渡 & 动画

Vue 组件基础→

Vue 实例生命周期

您的鼓励是对我最大的支持