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().进入层而且过渡动画结束时候调用. ...
随机推荐
- ABC323E Playlist 题解
考虑第 \(i\) 时刻时,第 \(j\) 首歌刚好结束与第 \(i-j\) 时刻有关,因此设 \(dp_{i,j}\) 表示第 \(i\) 时刻第 \(j\) 首歌刚好结束的概率,那么 \(dp\) ...
- Flume - [05] Hbase sink
一.概述 此接收器将数据写入Hbase.Hbase配置是从类路径中遇到的第一个Hbase-site.xml获取的.由配置指定的实现 HbaseEventSerializer 的类用于将事件转换为 ...
- DW001 - 数据仓库理论知识
数据仓库概念 数据仓库基本架构 数据集市概念 数据湖概念 数据仓库概念 数据仓库(Data Warehouse,DW)是一个面向主题的.集成的.非易失的.反映历史变化的.用来支持企业管理决策的数据集合 ...
- Hive - 多种表类型的CURD测试
关于torc.textfile.orc.es.hyperdrive表的CURD测试 TORC(支持事务的orc表)测试 TORC(分区表)测试 TEXTFILE 表测试 ORC 表测试 ES(Elas ...
- 使用form-create时修改表单数据
FormCreate 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持5个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂的 ...
- mac地址查询
打开命令提示符窗口(cmd程序) 快捷键 win+r 打开运行窗口,输入 cmd 命令打开 命令提示符窗口 或者点击开始菜单,在搜索程序和文件输入框,输入 cmd(会找到进入dos命令的cmd程序) ...
- 原生JS实现虚拟列表(不使用Vue,React等前端框架)
好家伙, 1. 什么是虚拟列表 虚拟列表(Virtual List)是一种优化长列表渲染性能的技术.当我们需要展示成千上万条数据时,如果一次性将所有数据渲染到DOM中,会导致页面卡顿甚至崩溃.虚拟 ...
- msvcp110.dll丢失修复 按我的方法来，保证修复！
方法很简单,msvcp110.dll丢失,安装Microsoft Visual C++ 2012 Redistributable Package就可以,我把修复程序的链接放下面.链接地址: 链接:ht ...
- SpringBoot集成LDAP认证登录
Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- ANSYS 导出节点的位移数据
1. 数据保存 确定待提取的节点编号: 获取节点位移变量: 将节点位移变量存储到数组中,用于数据传递: ! 输出对应节点的位移到csv文件 ! 注意同时导入.db和.rst,并切换到/post26模块 ...