Vue 中生命周期定义及流程

Vue 中的生命周期是指 Vue 实例从创建、运行、更新、销毁等一系列事件的过程。在 Vue 实例的生命周期中，Vue 提供了一系列的钩子函数在用户自定义的 JavaScript 代码中执行，可以进行一系列的业务逻辑处理。

Vue 的生命周期分为八个阶段：

1. beforeCreate （创建前）
2. created （已创建）
3. beforeMount（安装前）
4. mounted （已安装）
5. beforeUpdate（更新前）
6. updated （已更新）
7. beforeDestroy（销毁前）
8. destroyed （已销毁）

Vue 生命周期的流程如下：

创建前（beforeCreate）-> 已创建（created）-> 安装前（beforeMount）-> 已安装（mounted）-> 更新前（beforeUpdate）-> 已更新（updated）-> 销毁前（beforeDestroy）-> 已销毁（destroyed）

下面我们逐个介绍这些生命周期钩子的作用及用法。

1. beforeCreate（创建前）

在实例初始化之后，数据观测和事件配置之前被调用。在这个状态下，Vue 实例的标志符、事件和观测的数据都还没有初始化完成。在此阶段可以设置一些默认值或统计初始数据。

示例：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
    this.message = 'Hello, World!'
  }
}
</script>

1. created（已创建）

在 Vue 实例被创建之后，数据观测和事件配置已经完成，但是还没有开始 DOM 编译渲染。在这个状态下，Vue 实例已经完成数据观测和编译模板。在此阶段我们可以访问模板和实例的数据，进行网络请求或初始化操作。

示例：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created() {
    console.log('created')
    fetch('http://xxx.com')
      .then(response => response.json())
      .then(data => {
        this.message = data.message
      })
  }
}
</script>

1. beforeMount（安装前）

在 Vue 实例被挂载到页面之前，完成了模板编译，但是没有进行 DOM 对象的生成和插入。在此阶段可以完成一些需要在页面渲染之前的操作，比如控制台打印一些有用信息或者在渲染之前处理一些数据。

示例：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  beforeMount() {
    console.log('beforeMount')
    this.message = 'Hello, World!'
  }
}
</script>

1. mounted（已安装）

在 Vue 实例被挂载到页面后，完成了 DOM 对象的生成和插入。在此阶段可以访问到页面上的 DOM 对象、绑定一些事件和进行一些后续操作，比如使用第三方库对页面进行拓展。

示例：

<template>
  <p ref="message">{{ message }}</p>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
      message: ''
    }
  },
  mounted() {
    console.log('mounted')
    $('#app').css({background: '#F5F5F5'})
    this.$refs.message.style.color = 'blue'
  }
}
</script>

1. beforeUpdate（更新前）

在数据更新时执行，在执行此函数前，虚拟 DOM 已经更新完毕，但是浏览器的 DOM 并没有更新。在此阶段，可以进行一些数据更新前的操作，比如保留上一次数据的值、获取新的数据信息等。

示例：

<template>
  <p>{{ message }}</p>
  <button @click="changeMsg">Change Message</button>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created() {
    console.log('created')
    this.message = 'Hello, World!'
  },
  beforeUpdate() {
    console.log('beforeUpdate')
    console.log('Old message:', this.message)
  },
  methods: {
    changeMsg() {
      this.message = 'Hello, Vue!'
    }
  }
}
</script>

1. updated（已更新）

在数据更新时执行，此时 DOM 对象已经被重新渲染，数据已经被更新到新的值。在此阶段可以进行一些数据更新后的操作，比如修改或清除 DOM 数据。

示例：

<template>
  <p>{{ message }}</p>
  <button @click="changeMsg">Change Message</button>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created() {
    console.log('created')
    this.message = 'Hello, World!'
  },
  updated() {
    console.log('updated')
    console.log('New message:', this.message)
  },
  methods: {
    changeMsg() {
      this.message = 'Hello, Vue!'
    }
  }
}
</script>

1. beforeDestroy（销毁前）

在 Vue 实例被销毁之前执行，可以在此完成一些善后工作，比如清除定时器、清除订阅事件、界面元素清理等操作。

示例：

<template>
  <p>{{ message }}</p>
  <button @click="destroy">Destroy</button>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created() {
    console.log('created')
    this.message = 'Hello, World!'
  },
  beforeDestroy() {
    console.log('beforeDestroy')
    clearInterval(this.timer)
  },
  methods: {
    destroy() {
      this.$destroy()
    }
  }
}
</script>

1. destroyed（已销毁）

在 Vue 实例被销毁后执行，此时 Vue 实例中的事件、数据等资源均已销毁。在此阶段可以进行一些内存管理上的操作。

示例：

<template>
  <p>{{ message }}</p>
  <button @click="destroy">Destroy</button>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created() {
    console.log('created')
    this.message = 'Hello, World!'
  },
  destroyed() {
    console.log('destroyed')
  },
  methods: {
    destroy() {
      this.$destroy()
    }
  }
}
</script>

以上就是 Vue 生命周期的完整攻略，我们可以根据实际需求灵活使用生命周期，从而更好地管理 Vue 组件的生命周期。