VUE3组合api的钩子函数生命周期

缺乏、安全感 2022-09-08 14:49 178阅读 0赞

> 选项API生命周期选项和Composition API之间的映射  
> beforeCreate------>使用setup()  
> created------>使用setup（）  
> beforeMount--------->onBeforeMount  
> mounted-------->onMounted  
> beforeUpdate------------>onBeforeUpdate  
> updated---------->onUpdated  
> beforeUnmout----------->onBeforeUnmount  
> unmounted---------->onUnmounted
> 
> 这些生命周期钩子函数只能在setup()函数中使用

<template>
    	<div>
    		<p>{
       {count}}</p>
    		<button @click="change">修改</button>
    	</div>
    </template>
    
    <script>
    	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    	export default{
    		setup(){
    			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')
    			})
    			
    			const count=ref(1)
    			const change=()=>{
    				count.value=6
    			}
    			return{
    				count,
    				change
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pyI55av_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pyI55av_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/723c37612e9e4573b2035fcb1c847c89.png

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue的生命周期（钩子）函数

> BeforeCreate 创建前 > > Created 创建后 > > BeforeMount 挂载前 > > Mounted 挂载完成 > > BeforeUp

男娘i/ 2023年10月09日 18:49/ 0 赞/ 85 阅读

相关 Vue.js的生命周期(钩子函数)

Vue的生命周期生命周期简介生命周期图示生命周期图解 Vue创建阶段 beforeCreat

旧城等待，/ 2022年12月20日 08:51/ 0 赞/ 236 阅读

相关 vue生命周期和钩子函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

r囧r小猫/ 2022年12月12日 15:22/ 0 赞/ 235 阅读

相关 Vue生命周期的钩子函数

Vue生命周期的钩子函数目录 Vue生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log

雨点打透心脏的1/2处/ 2022年10月26日 14:18/ 0 赞/ 328 阅读

相关 VUE3组合api的钩子函数生命周期

> 选项API生命周期选项和Composition API之间的映射 > beforeCreate------>使用setup() > created------>使用

缺乏、安全感/ 2022年09月08日 14:49/ 0 赞/ 179 阅读

相关【VueJS】Vue的生命周期（钩子函数）

环境：Vue2.x版本在Vue的官网有一张图已经很好的诠释了生命周期，我在这里就不再多讲了，直接贴图，然后上程序代码。 ![这里写图片描述][SouthEast]

柔光的暖阳◎/ 2022年06月02日 04:54/ 0 赞/ 281 阅读

相关彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数

官方图（官方的图大家总是理解不了）： ![70][] 使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情

秒速五厘米/ 2022年05月05日 13:56/ 0 赞/ 255 阅读

相关 Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：[点击前往][Link 1] Vue钩子函数官方文档：[点击前往][Link 2

矫情吗；*/ 2021年07月25日 15:39/ 0 赞/ 592 阅读

相关 Vue生命周期钩子函数

一点睛 1 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个

小灰灰/ 2021年07月24日 21:58/ 0 赞/ 561 阅读

相关 vue生命周期钩子函数（总结）

vue生命周期钩子函数：常用的八个分别是： beforeCreate created beforeMount mounted befor

深碍√TFBOYSˉ_/ 2021年07月24日 12:10/ 0 赞/ 530 阅读