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().进入层而且过渡动画结束时候调用. ...
随机推荐
- Vulkan环境配置 | vscode+msvc 解决方案
Vulkan环境配置 | vscode+msvc 解决方案 前言 如果作为Windows 11侠的你是一个vscode爱好者,凑巧电脑上还安装有Visual Studio,这个时候你突然想配置一个Vu ...
- Elasticsearch搜索引擎学习笔记（二）
可视化插件 GitHub搜索elasticsearch-head并下载,如果网络不好可以在gitee上搜索. 这是一个前端项目,需要安装nodejs. 在项目根目录执行 npm install npm ...
- MyBatis与其使用方法讲解
ORM 在讲解Mybatis之前,我们需了解一个概念ORM(Object-Relational Mapping)对象关系映射,其是数据库与Java对象进行映射的一个技术.通过使用ORM,我们可以不用编 ...
- 【Python脚本】刚度矩阵格式转换
对于1-2-3坐标系: 应力矩阵如下: \[\left.[\sigma]=\left[\begin{array}{ccc}\sigma_{11}&\sigma_{12}&\sigma_ ...
- redmine 127访问成功，其他机器不能访问
添加防火墙 入站规则
- 记录一个命令 可以在linux很方便的安装一些软件
小鱼的一键安装系列 wget http://fishros.com/install -O fishros && . fishros 一键安装:ROS(支持ROS和ROS2,树莓派Jet ...
- 《机器人SLAM导航核心技术与实战》第1季：第9章_视觉SLAM系统
<机器人SLAM导航核心技术与实战>第1季:第9章_视觉SLAM系统 视频讲解 [第1季]9.第9章_视觉SLAM系统-视频讲解 [第1季]9.1.第9章_视觉SLAM系统_ORB-SLA ...
- access的多个left outer join连接
虽然你有一万个理由,但是选择ACCESS数据库就是一个不能再蠢的决定. 从AC990账务系统中采集凭证记录,需要做多个左连接.在sql server管理器中执行蛮好,没有问题.可是在程序中就一堆Err ...
- Centos系统云主机中nvme盘不可用解决方法
本文分享自天翼云开发者社区<Centos系统云主机中nvme盘不可用解决方法>,作者:P****n 问题描述 Linux系统的云主机使用NVMe盘后,出现非预期的慢IO读写,导致系统或者应 ...
- Armbian安装防火墙软件
在Armbian操作系统中安装防火墙是一项提升系统安全性的重要步骤.Armbian是一个针对ARM架构设备的Debian Linux发行版,它广泛应用于各类ARM开发板和单板计算机上.下面将具体展开讲 ...