-
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第3章 Vue.js生命周期函数 3.1 创建期间生命周期函数
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
第3章 Vue.js生命周期函数
Vue实例在创建、运行、销毁的过程中，会伴随各种事件(函数)，这些事件就是Vue的生命周期函数，也叫作生命周期钩子。
生命周期函数可以分为三类：创建期间生命周期函数、运行期间生命周期函数、销毁期间生命周期函数
3.1 创建期间生命周期函数
官方文档:
https://v2.cn.vuejs.org/v2/guide/instance.html
Vue生命周期流程图
3.1.1 beforeCreate
new Vue() → 创建Vue实例
init() → 实例初始化
在实例初始化过程中，遇到第一个生命周期函数beforeCreate，它属于创建期间生命周期函数。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Documenttitle> head> <body> <div id="app" v-cloak> div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script> var vm = new Vue({ el: '#app', data: { msg: "Hello world" }, methods: { show(){ console.log("Hello") } }, beforeCreate() { console.log(this.msg) this.show() } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
生命周期函数不用手动调用，在创建Vue实例时，会自动调用
查看控制台输出：
根据这个执行结果，可以知道：
- beforeCreate在实例Vue实例创建之间，data中的数据和methods中的方法并没有初始化，所以不能调用
3.1.2 created
测试
可以看到：
- 在created生命周期中，data中的数据和methods中的方法已经初始化完成，可以调用
- Ajax请求一般在created生命周期函数中发送
3.1.3 el属性和template属性
再下来
流程图中，判断实例中是否有el和template属性。
3.1.4 beforeMount
beforeMount是创建期间第三个生命周期函数，从这个生命周期函数开始，Vue开始编译模板、渲染数据、将data中的数据渲染到视图层的HTML页面上。
使用原生JS查看是否能够获取到数据：
可以看到在beforeMount生命周期函数中，Vue开始编译模板、渲染数据，但是并没有真实挂在到HTML页面上，所以控制台打印出了源码，而不是真实的数据。
3.1.5 mounted
再下来，创建期间最后一个生命周期函数是mounted，它表示将数据渲染完成，真实挂载到页面中。
到这个时候，Vue实例创建完成。
-
相关阅读:
鸿蒙应用开发之三方库使用
【Minio】Linux中Docker下Minio启动提示权限不足
Redis实操详解
Https中间人攻击
YOLOv9尝鲜测试五分钟极简配置
FITC-PEG-FA，Folic acid-PEG-Fluorescein，叶酸PEG荧光素
jumpserver迁移后windowserver资产无法登陆问题排查
LLM大模型实战 —— DB-GPT阿里云部署指南
Apache Drill的学习
香氛行业品类新趋势洞察|香氛成为跨界宠儿，谁能“真香”？
- 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566187
