生命周期钩子

这些生命周期钩子注册函数只能在 setup()期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例。

官网给出的映射如下：

示例

查看生命周期钩子的执行顺序

<template><div class="home"><div>{{userInfo.name}}</div><div>{{userInfo.age}}</div><button @click="changeUserName">修改名称</button><button @click="changeUserAge">修改年龄</button></div>
</template><script lang="ts">
import {defineComponent, ref, reactive, toRef, toRefs,onMounted, onUpdated, onUnmounted,
} from 'vue';export default defineComponent({name: 'Home',beforeCreate() {console.log('beforeCreate');},created() {console.log('created');},setup(props, context) {console.log('setup');onMounted(() => {console.log('onMounted!');});onUpdated(() => {console.log('onUpdated!');});onUnmounted(() => {console.log('onUnmounted!');});},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},
});
</script>

执行结果：

从上面的执行结果可以看出setup函数是在beforeCreate、created函数之前执行，还有就是生命周期钩子函数onMounted比mounted 先执行，其他生命周期也是同理。

vue3基础-组合式API之生命周期钩子相关推荐

vue3基础-组合式API之watch
watch 与Vue2.x中watch配置功能一致 watch 函数是提供了在某个时机做一些事情,同vue的生命周期钩子和 computed 的区别是,watch看重的是过程变化,而computed ...
Vue3基础-组合式 API 基础之setup
背景 Vue3 提供了组合式 API,这个功能对代码维护提供了很大帮助. 我们可以看下Vue2之前的代码结构,借用官方文档的图,说明如下: 再来看下使用组合式API 后的代码结构,借用网上的图例,说明 ...
vue3基础-组合式API之computed
computed 与Vue2.x中computed配置功能一致如使用script-setup可不用return,直接在template中使用即可 // 引入 computed import { co ...
Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
Vue3为什么要使用组合式API--Vue3的组合式API和Vue2的选项式API的优缺点 1.Vue2为什么使用选项式API 2.Vue2如何使用组合式API 3.组合式API Vs 选项式API ...
Vue3 - 生命周期钩子函数（组合式 API）
前言 Vue 是组件化编程,从一个组件诞生到消亡会经历很多过程,这些过程就叫做生命周期.而伴随着生命周期,给用户使用的函数,就叫钩子函数,实际为操控生命周期. 本文主要对比 Vue2 生命周期,引出并 ...
Vue3 Composition API（三）——生命周期钩子、Provide函数和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代生命周期钩子. 那么setup中如何使用生命周期函 ...
Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件与父组件传递数据给子组件 -- 方式props ...
Vue选项式 API 的生命周期选项和组合式 API
Vue2.Vue3 生命周期的变化正好在看Vue的官方文档,也正好比对一下,做一下笔记选项式 API 的生命周期选项的变化这里我们会发现Vue3对Vue2的生命周期钩子似乎没有做大的调整修改 ...
vue3生命周期钩子函数
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图代码 // 通过配置项 beforeCreate () { console.log('beforeCreate'); }, created ...

vue3基础-组合式API之生命周期钩子

生命周期钩子

示例

vue3基础-组合式API之生命周期钩子相关推荐

最新文章

热门文章