vue 生命周期

Vue生命周期钩子是在特定时间点调用的自定义函数。Vue实例有一个完整的生命周期，从三个阶段的创建、更新和销毁组成。创建阶段时，我们将涉及到beforeCreate、created、beforeMount和mounted钩子。更新阶段包括beforeUpdate、updated和activated/deactivated钩子。销毁阶段只涉及beforeDestroy和destroyed钩子。

创建阶段

在beforeCreate钩子回调之前，Vue实例的初始化过程已经完成。在这个阶段，所有的生命周期钩子函数和数据观测都将被配置，但是真正的DOM尚未被创建。这就是说，在beforeCreate钩子之前，我们不能访问数据、计算属性、方法等，并且我们不能进行任何DOM操作。这个回调钩子常常用于初始化非响应式的属性。例如，我们可以在此处获取用户的输入并将其作为初始化数据。

beforeCreate: function () { this.username = prompt('What is your name?') }

下一个阶段是created生命周期。此时Vue实例的数据观测以及事件和侦听器配置已经完成。 Vue实例被完全初始化，并且可以访问数据和计算属性。但是，注意到这时虚拟DOM还没有被渲染，并且DOM尚未被挂载到页面上。我们常常可以在created阶段中进行一些异步请求操作。

created () { axios.get('/api/data') .then(response => { this.data = response.data }) }

在beforeMount钩子回调执行之前，Vue实例会创建实际的DOM，并且把虚拟DOM渲染到实际的DOM上。 在此阶段中，我们可以访问DOM元素来进行DOM操作。我们可以在这个阶段添加一些高阶组件。

beforeMount () { this.$nextTick(() => { this.$refs.button.addEventListener('click', this.someFunction) }) }

在mounted回调执行之后，Vue实例已经被完全挂载到了页面上。在这个阶段，我们可以访问到DOM元素，像是refs（获取组件或元素的引用）和el（获取实例对应的DOM元素）。当存在需要进行DOM操作的问题时，mounted钩子很常用，例如我们用来初始化动态地载入第三方JavaScript插件。

mounted () { var myPlugin = new ThirdPartyPlugin() myPlugin.init(this.$el) }

更新阶段

在更新阶段，我们将涉及到beforeUpdate和updated钩子。在这个阶段中，由于数据更新，虚拟DOM被重新渲染，在此之前，DOM已经被渲染，并且存在于页面上。在这个阶段，我们可以进行监控、监听等操作。

beforeUpdate () { If (this.status === 'loading') { this.$nextTick(() => { document.querySelector('.spinner').classList.add('loading') }) } }

在updated钩子中，Vue实例的重新渲染只处理一次更新的DOM。强制重新渲染DOM会导致死循环，因此我们在更新DOM时应该小心。我们可以更新一些状态，例如用户输入后的自动保存。

updated () { this.$nextTick(() => { localStorage.setItem('notes', this.notes) }) }

销毁阶段

在最后的销毁阶段，我们将涉及到beforeDestroy和destroyed钩子。在这个阶段，Vue实例已经从DOM元素中被卸载，但是Vue实例本身还没有被销毁。在这个阶段，我们可以进行清理，例如移除事件侦听器、取消定时器、释放内存等,beforeDestroy钩子执行前，Vue实例仍然完全可用。这是一个很好的时机来移除侦听器和定时器。

beforeDestroy () { clearInterval(this.intervalId) document.removeEventListener('click', this.someFunction) }

最后一个钩子是destroyed。在这个钩子回调中，Vue实例和所有子元素指令都已经被销毁，无法访问Vue实例的数据和方法。此时，我们可以进行最后的清理工作，例如释放内存。

destroyed () { this.someFunction = null }

总结：Vue的生命周期包括三个阶段：创建、更新和销毁。对于每个阶段，Vue提供了特定的钩子回调函数，其中beforeCreate、created、beforeMount和mounted钩子用于创建阶段，beforeUpdate和updated钩子用于更新阶段，beforeDestroy和destroyed钩子用于销毁阶段。Vue实例的生命周期的管理可以帮助我们更好地控制组件的渲染过程和优化性能。