vue3 基础-生命周期函数
在 vue 中, 生命周期函数可理解为 "在某个时刻, 会自动执行的函数". 先直观感受一下图示.
一共就八个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 生命周期函数</title>
<script src="./js/vue@3.2.23.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 生命周期函数: 在某一个时刻会自动执行的函数
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
methods: {
handleItemClick() {
alert('click');
}
},
// 1. 在实例生成之前
beforeCreate() {
console.log('beforCreate');
},
// 2. 在实例生成之后
created() {
console.log('created');
},
// 3. 在组件内容被渲染到页面之前
beforeMount() {
console.log(document.getElementById('root').innerHTML, 'beforMount');
},
// 4. 在组件内容被渲染到页面之后
mounted() {
console.log(document.getElementById('root').innerHTML, 'mounted');;
},
// 5. 当 data 中的数据发生变化时, 会立即自动执行
beforeUpdate() {
console.log(document.getElementById('root').innerHTML, 'beforeUpdate');;
},
// 6. 当 data 中的数据发生变化, 页面重新渲染后后执行
updated() {
console.log(document.getElementById('root').innerHTML, 'updated');
},
// 7. 当 Vue 应用失效时, 自动执行的函数
beforeUnmount() {
console.log('beforUnmount');
},
// 8. 当 Vue 应用失效时, 且dom完全销毁的时候
unmounted() {
console.log('unmounted');
},
template: `<div v-on:click=handleItemClick>{{message}}</div>`
})
const vm = app.mount('#root');
</script>
</html>
再来重复一遍吧, 这个也是重在理解和能基本使用即可, 没有什么技巧的.
beforCreate ( ) : 在实例生成前执行
created ( ) : 在实例生成后执行
beforeMount ( ) : 在组件内容被渲染到页面之前执行
mounted ( ) : 在组件内容被渲染到页面之后执行
beforUpdate ( ): 当 data 中的数据发生变化时, 会立即自动执行
updated ( ) : 当 data 中的数据发生变化后, 页面重新渲染后执行
beforUnmount ( ) : 当 vue 应用失效时, 会自动执行
unmounted ( ) : 当 vue 应用失效后, 且 dom 元素完全被销毁之后执行
vue3 基础-生命周期函数的更多相关文章
- VUE3 之 生命周期函数
1. 概述 老话说的好:天生我材必有用,千金散尽还复来. 言归正传,今天我们来聊一下 VUE 的生命周期函数. 所谓生命周期函数,就是在某一条件下被自动触发的函数. 2. VUE3 生命周期函数介绍 ...
- 五、vue基础--生命周期函数
1.创建阶段: a.beforeCreate:Vue已经创建了,但是data,methods都还没有被创建好 b.created:datamethods都被创建好了 c.beforeMount:模板经 ...
- 10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景
一. ref 的使用 ( 直接获取 DOM 元素 ) 在 input 标签上 可以使用 ref 属性 获取当前DOM节点 eg: import React , { Component, Fragmen ...
- Vue基础之生命周期函数[残缺版]！
Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...
- 【Unity基础知识】认识常用的生命周期函数（Awake、Start、Update...）
一.了解帧的概念 游戏的本质就是一个死循环 每一次循环都会处理游戏逻辑 并 更新一次游戏画面 之所以能看到画面在动 是因为 切换画面速度达到一定速度时 人眼就会认为画面是动态且流畅的 一帧就是执行了一 ...
- vue3.0的生命周期函数
stetup(){}在 生命周期函数 系列中的优先级 〇setup(){ //优先级最高 处于created生命周期之前的函数,是无法访问data,methods中的数据是无法访问到的,setup中的 ...
- Activity的生命周期函数
前言: 上一篇文章写了关于Activity生命周期和生命周期状态的介绍,这一篇文章给大家聊聊Activity生命周期函数. 主Activity: 应用程序的入口一般都是桌面应用程序图标,用户点击应用图 ...
- vuejs生命周期函数
生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单 ...
- Activity系列讲解---三大基本状态与七大生命周期函数
简介:四大组件之一,在应用中一个Activity可以用来表示一个界面,可以理解为用户可视化界面,一个android应用必须通过Activity来运行和启动. 1.三大基本状态与七大生命周期函数 2.代 ...
- Cocos2d-x场景生命周期函数介绍
层(Layer)的生命周期函数有如下: init().初始化层调用. onEnter().进入层时候调用. onEnterTransitionDidFinish().进入层而且过渡动画结束时候调用. ...
随机推荐
- Java学习记录01
营销核心 营销核心是让利,外围是怎么去让利,三环是公共平台 策略模式学习 意图:定义一系列方法将其封装,并且相互可以替代 目的:解决if-else带来的复杂性和难以维护性 关键实现:多个方法类实现同一 ...
- TDH - 使用DBeaver连接InceptorSQL
TDH版本:TDH 4.3.x DBeaver版本:dbeaver-ce-23.0.4-win32.win32.x86_64 1.下载客户端(即为DBeaver连接InceptorSQL所需的驱动包) ...
- 07_读写文件open(filename, mode, encoding=None)
读写文件open(filename, mode, encoding=None) mode mode 权限 r 只读 w 只写(会从头开始覆盖覆盖写当前文件内容) a 追加写(从文件内容的末尾追加写内容 ...
- FastAPI 表单参数与文件上传完全指南：从基础到高级实战 🚀
title: FastAPI 表单参数与文件上传完全指南:从基础到高级实战 date: 2025/3/8 updated: 2025/3/8 author: cmdragon excerpt: 本教程 ...
- ITSS 运维-服务台相关内容
- 【Logisim】带有初始化功能的寄存器
属于是拾人牙慧 子电路外观 子电路逻辑 描述: Q端 Counter + MUX : 实现初始化.初始时MUX选择init,待时钟第一个上升沿后,Counter([Data Bit]:1bit,[Ac ...
- Ubuntu安装配置redis
更新安装相关依赖库 下面步骤一步一步来 sudo apt update sudo apt install build-essential sudo apt-get install manpages-d ...
- go context 子Goroutine超时控制
context使用 Go语言第一形参通常都为context.Context类型,1. 传递上下文 2. 控制子Goroutine超时退出 3. 控制子Goroutine定时退出 package mai ...
- Java使用多线程处理未知任务数方案
知道任务个数,你可以定义好线程数规则,生成线程数去跑 代码说明: 虚拟线程池: 使用 Executors.newVirtualThreadPerTaskExecutor() 创建虚拟线程池,每个任务将 ...
- Centos 安装 nload （流量监控）
QQ交流群:646559931.系统安装基本工具[root@localhost ~]# yum install -y gcc gcc-c++ make flex byacc libpcap ncurs ...