Vue生命周期函数执行顺序（使用注意事项）

文章目录

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Vue.js 是一个基于 MVVM 模式的前端框架，它的核心是一个响应式的数据绑定系统。在 Vue.js 中，组件是一个可复用的 Vue 实例，它拥有自己的生命周期钩子函数，用于在组件生命周期的不同阶段执行一些特定的逻辑。下面通过例子介绍一下常见的 Vue 组件生命周期：
在这里插入图片描述

beforeCreate

beforeCreate()：在实例被创建之初执行的函数。在这个钩子函数中，可以进行一些初始化的操作，例如初始化数据、注入组件等等。该函数执行时，Vue实例的数据观测和事件配置都还没有被设置，所以不能访问实例的this属性，也不能访问DOM元素。

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

示例中，beforeCreate钩子函数中设置了message属性的值为’Hello, Vue!'。在created钩子函数中，可以看到这个属性已经被设置，所以可以将其渲染到模板中。

注意：beforeCreate钩子函数只会在实例被创建之初执行一次，之后不会再执行。如果需要在实例更新之前进行一些操作，可以使用beforeUpdate钩子函数。

created

created()：在实例被创建之后立即执行。在这个钩子函数中，可以进行一些初始化的操作，例如获取数据、设置计算属性等等。在这个钩子函数被执行时，Vue实例已经完成了数据观测和事件配置，但还没有开始DOM编译和挂载，所以仍然不能访问DOM元素。

<template><div>{{ message }}</div>
</template><script>
export default {created() {console.log('created')this.getMessage()},data() {return {message: ''}},methods: {getMessage() {// 获取数据的方法this.message = 'Hello, Vue!'}}
}
</script>

示例中，created钩子函数中调用了getMessage方法来获取数据并设置了message属性的值。在模板中，可以看到这个属性已经被渲染出来了。

注意：created钩子函数只会在实例被创建之后执行一次，之后不会再执行。如果需要在实例更新之后进行一些操作，可以使用updated钩子函数。

beforeMount

beforeMount()：在实例挂载之前执行。在这个钩子函数中，可以对模板进行一些编译和渲染前的操作。在这个钩子函数被执行时，Vue实例已经完成了数据观测和计算属性的计算，但还没有开始DOM编译和挂载。

<template><div ref="myDiv">{{ message }}</div>
</template><script>
export default {beforeMount() {console.log('beforeMount')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}}
}
</script>

示例中，beforeMount钩子函数中设置了myDiv元素的颜色为红色。在模板中，可以看到这个颜色已经被应用到了渲染出来的元素中。

注意：beforeMount钩子函数只会在实例挂载之前执行一次，之后不会再执行。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

mounted

mounted()：在实例挂载之后立即执行。在这个钩子函数中，可以对模板进行一些操作，例如访问DOM元素、使用第三方插件等等。在这个钩子函数被执行时，Vue实例已经完成了DOM编译和挂载，所以可以访问DOM元素。

<template><div ref="myDiv">{{ message }}</div>
</template><script>
export default {mounted() {console.log('mounted')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}}
}
</script>

示例中，mounted钩子函数中设置了myDiv元素的颜色为红色。在模板中，可以看到这个颜色已经被应用到了渲染出来的元素中。

注意：，mounted钩子函数只会在实例挂载之后执行一次，之后不会再执行。如果需要在实例更新之后进行一些操作，可以使用updated钩子函数。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

beforeUpdate

beforeUpdate()：在数据更新之前立即执行。在这个钩子函数中，可以进行一些数据更新前的操作，例如获取更新前的DOM信息等等。在这个钩子函数被执行时，Vue实例已经完成了数据的计算和渲染，但还没有开始DOM重新渲染。

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

示例中，定义了一个updateMessage方法，用于更新message属性的值。在点击按钮之后，message属性的值将会被更新，并且beforeUpdate钩子函数会被执行。

注意：beforeUpdate钩子函数只会在数据更新之前执行一次，之后不会再执行。如果需要在数据更新之后进行一些操作，可以使用updated钩子函数。

updated

updated()：在数据更新之后立即执行。在这个钩子函数中，可以对更新后的DOM进行操作，例如获取更新后的DOM信息等等。在这个钩子函数被执行时，Vue实例已经完成了数据的计算和渲染，也完成了DOM重新渲染。

<template><div ref="myDiv">{{ message }}</div><button @click="updateMessage">Update Message</button>
</template><script>
export default {updated() {console.log('updated')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}},methods: {updateMessage() {this.message = 'Hello, World!'}}
}
</script>

示例中，定义了一个updateMessage方法，用于更新message属性的值。在点击按钮之后，message属性的值将会被更新，并且updated钩子函数会被执行。在updated钩子函数中，将myDiv元素的颜色设置为红色。

注意：updated钩子函数只会在数据更新之后执行一次，之前不会执行。如果需要在数据更新之前进行一些操作，可以使用beforeUpdate钩子函数。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

beforeDestroy

beforeDestroy()：在实例销毁之前立即执行。在这个钩子函数中，可以进行一些实例销毁前的操作，例如清除定时器、取消事件监听等等。

<template><div>{{ message }}</div><button @click="destroy">Destroy Instance</button>
</template><script>
export default {beforeDestroy() {console.log('beforeDestroy')// 清除定时器、取消事件监听等等},data() {return {message: 'Hello, Vue!'}},methods: {destroy() {this.$destroy()}}
}
</script>

示例中，定义了一个destroy方法，用于销毁Vue实例。在点击按钮之后，beforeDestroy钩子函数会被执行。

注意：beforeDestroy钩子函数只会在实例销毁之前执行一次，之后不会再执行。如果需要在实例销毁之后进行一些操作，可以使用destroyed钩子函数。

destroyed

destroyed()：在实例销毁之后立即执行。在这个钩子函数中，可以进行一些实例销毁后的操作，例如清除定时器、取消事件监听等等。

<template><div>{{ message }}</div><button @click="destroy">Destroy Instance</button>
</template><script>
export default {destroyed() {console.log('destroyed')// 清除定时器、取消事件监听等等},data() {return {message: 'Hello, Vue!'}},methods: {destroy() {this.$destroy()}}
}
</script>