【Vue】生命周期一文详解

目录

一、beforeCreate

下面是一个beforeCreate的简单使用示例：

在控制台输出'before create hook'。

二、created

下面是一个created的简单使用示例：

在控制台输出'created hook'。

三、beforeMount

下面是一个beforeMount的简单使用示例：

在真实DOM生成后，页面会显示'hello world'。

四、mounted

下面是一个mounted的简单使用示例：

控制台输出组件的innerText。

五、beforeUpdate

下面是一个beforeUpdate的简单使用示例：

在调用changeMessage方法之后，控制台会输出'before update message: before update hook message'。

六、updated

下面是一个updated的简单使用示例：

在调用changeMessage方法之后，控制台会输出'updated message: hello world'。

七、beforeUnmount

下面是一个beforeUnmount的简单使用示例：

在组件DOM节点从页面中移除之前，控制台会输出'before unmount'。

八、unmounted

下面是一个unmounted的简单使用示例：

在组件DOM节点从页面中移除之后，控制台会输出'unmount'。

以上就是Vue3的各个生命周期钩子函数的详细解释和使用方法，希望可以对读者有所帮助。

---

Vue3是Vue.js的最新版本，其生命周期相对于Vue.js 2.x版本有所改变，本文将详细介绍Vue3的各个生命周期，包括其执行顺序、作用、使用方法以及配合代码案例

一、beforeCreate

beforeCreate钩子函数是在Vue3实例被创建之初执行的，此时Vue3实例中的数据和方法都还未初始化，因此在beforeCreate中无法访问到组件的data、computed、methods等属性。

下面是一个beforeCreate的简单使用示例：

<script>
export default {beforeCreate() {console.log('before create hook')}
}
</script>

在控制台输出'before create hook'。

二、created

created钩子函数是在Vue3实例被创建后立即执行的，此时Vue3实例中的数据已经被初始化，但是模板还未生成，因此在created中无法访问到组件的DOM节点。

下面是一个created的简单使用示例：

<script>
export default {created() {console.log('created hook')}
}
</script>

在控制台输出'created hook'。

三、beforeMount

beforeMount钩子函数在Vue3实例的模板挂载到真实DOM之前执行，此时Vue3实例已经将数据和模板联系起来，但是还未生成DOM节点，可以在此时修改数据，这样修改后的数据会在真实DOM生成后立即呈现出来。

下面是一个beforeMount的简单使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'before mount hook message'}},beforeMount() {this.message = 'hello world'}
}
</script>

在真实DOM生成后，页面会显示'hello world'。

四、mounted

mounted钩子函数在Vue3实例的模板已经挂载到真实DOM之后执行，此时Vue3实例已经生成了DOM节点，并将数据绑定到了DOM节点上，此时可以访问组件的DOM节点。

下面是一个mounted的简单使用示例：

<template><div ref="message">{{ message }}</div>
</template><script>
export default {mounted() {console.log(this.$refs.message.innerText)}
}
</script>

控制台输出组件的innerText。

五、beforeUpdate

beforeUpdate钩子函数在Vue3实例的数据发生改变，但是还未更新DOM节点之前执行，此时可以在beforeUpdate中获取到新的数据和旧的数据，以及修改之前的DOM节点状态。

下面是一个beforeUpdate的简单使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'before update hook message'}},methods: {changeMessage() {this.message = 'hello world'}},beforeUpdate() {console.log(`before update message: ${this.message}`)}
}
</script>

在调用changeMessage方法之后，控制台会输出'before update message: before update hook message'。

六、updated

updated钩子函数在Vue3实例的数据发生改变并且DOM节点已经更新之后执行，此时可以访问到最新的DOM节点状态。

下面是一个updated的简单使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'updated hook message'}},methods: {changeMessage() {this.message = 'hello world'}},updated() {console.log(`updated message: ${this.message}`)}
}
</script>

在调用changeMessage方法之后，控制台会输出'updated message: hello world'。

七、beforeUnmount

beforeUnmount钩子函数在Vue3实例被销毁之前执行，此时可以对Vue3实例进行一些清理工作，如清除定时器、取消订阅等操作。

下面是一个beforeUnmount的简单使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'before unmount hook message'}},mounted() {setTimeout(() => {this.$el.remove()}, 3000)},beforeUnmount() {console.log('before unmount')}
}
</script>

在组件DOM节点从页面中移除之前，控制台会输出'before unmount'。

八、unmounted

unmounted钩子函数在Vue3实例被销毁之后执行，此时Vue3实例已经从内存中移除，可以在此时清除定时器、取消订阅、释放内存等操作。

下面是一个unmounted的简单使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'unmount hook message'}},mounted() {setTimeout(() => {this.$el.remove()}, 3000)},unmounted() {console.log('unmount')}
}
</script>

在组件DOM节点从页面中移除之后，控制台会输出'unmount'。

以上就是Vue3的各个生命周期钩子函数的详细解释和使用方法，希望可以对读者有所帮助。