配置项的形式使用

用一个例子来学习 vue3 的生命周期钩子

App.vue 中引入 Demo，并添加一个按钮来隐藏或显示

<template><div><Demo v-if="isShow"/><br><button @click="isShow = !isShow">点我隐藏/显示</button></div>
</template><script>
import Demo from './components/Demo'
import {ref} from 'vue'
export default {name: 'App',components: {Demo},setup(){const isShow = ref(true)return{isShow}}
}
</script>

Demo 中显示一个 sum，点击按钮 sum++，同时我们把 vue3 中的生命周期钩子列出来，并打印

<template><h2>当前求和为：{{ sum }}</h2><button @click="sum++">点我sum++</button>
</template><script>
import {ref} from 'vue'export default {name: 'Demo',setup() {let sum = ref(0);return {sum,}},//通过配置项的形式使用生命周期钩子beforeCreate() {console.log("--beforeCreate");},created() {console.log("--created");},beforeMount() {console.log("--beforeMount");},mounted() {console.log("--mounted");},beforeUpdate() {console.log("--beforeUpdate");},updated() {console.log("--updated");},beforeUnmount() {console.log("--beforeUnmount");},unmounted() {console.log("--unmounted");}
}
</script>

刚一进页面：

当点击 sum++ 时：

当点击隐藏显示时：

隐藏后再点击展示：

组合式API形式使用

Vue3.0 中可以继续使用 Vue2.x中的生命周期钩子，但有有两个被更名:
。beforeDestroy改名为beforeUnmount
。destroyed改名为unmounted

Vue3.0 也提供了 Composition AP I形式的生命周期钩子，与 Vue2.x 中钩子对应关系如下：
obeforeCreate===>setup()
created =======> setup()
beforeMount ===> onBeforeMount
mounted =======> onMounted
beforeUpdate ===> onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==> onBeforeUnmount
unmounted =====> onUnmounted

<template><h2>当前求和为：{{ sum }}</h2><button @click="sum++">点我sum++</button>
</template><script>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue'export default {name: 'Demo',setup() {let sum = ref(0);console.log("--setup");onBeforeMount(() => {console.log("--onBeforeMount");})onMounted(() => {console.log("--onMounted");})onBeforeUpdate(() => {console.log("--onBeforeUpdate");})onUpdated(() => {console.log("--onUpdated");})onBeforeUnmount(() => {console.log("--onBeforeUnmount");})onUnmounted(() => {console.log("--onUnmounted");})return {sum,}},
}
</script>

一进页面：

点 sum++

点击隐藏

点击显示

Vue Vue3的生命周期相关推荐

Vue3的生命周期的使用
Vue3生命周期与Vue2生命周期的区别在vue3的生命周期中没有了销毁之前(beforeDestroy )以及销毁完毕(destroyed )这两个生命周期. 取而代之的是卸载,卸载之前(befo ...
Vue实例的生命周期详解，从创建到销毁全过程
文章目录前言初识new Vue Vue实例从创建到销毁 1.创建之前-beforeCreate() 2.创建之后-created() 3.实例对象和文档挂载之前-beforeMount() 4.实 ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
vue组件的生命周期和执行过程
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
Vue父子组件生命周期
Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
vue实例的生命周期详解
Vue实例的生命周期简介此篇文章说的是最简单的单个VUE组件的生命周期. 官网中的长图诠释了Vue实例从创建,运行到销毁的整个过程.从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这 ...

Vue Vue3的生命周期

文章目录

配置项的形式使用

组合式API形式使用

Vue Vue3的生命周期相关推荐

最新文章

热门文章