• Vue 2.0——生命周期(官网解读)

    文章目录

    前言

    根据 官方文档 中的描述，增加个人的理解和说明。这只是一个笔记。

    什么是生命周期钩子

    至于什么是生命周期钩子，为什么会取钩子这个词，我也不甚理解。但对于生命周期而言，相信很多人都会知道大部分软件都会有这方面的词汇。

    比如：Java-web框架中的Spring生命周期、html的页面生命周期等。

    在官网中，针对生命周期钩子有下面的描述内容：

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
    同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段 添加自己的代码的机会。

    对于生命周期钩子函数的使用，在 生命周期钩子函数API 中有各种函数说明。

    使用规范

    在使用生命周期钩子函数时，需要注意下列几点要求：

    • 必须写在 new Vue 实例中。
    • 生命周期钩子函数是 Vue 实例中的成员方法，注意这里不是methods！

      在对象内，以属性的方式进行申明！

    • 在生命周期的函数中，不能出现箭头函数。

      无法使用this。

    生命周期函数描述

    函数名触发场景
    beforeCreate实例化之后，在数据观测(data observer)和 event/watcher 事件配置之前被调用
    created已成创建好实例，在实例创建好之后被调用。
    此时，实例已经完成以下配置：数据观测(data observer)，属性和方法的运算，watch / event 事件回调。
    但是，挂载阶段还未开始， $el 属性目前不可见。
    beforeMount在挂载开始之前被调用：相关的渲染函数首次被调用。
    mounted挂载成功后被调用，el 将被新创建的 vm.$el 替换。
    beforeUpdate数据更新(变化)之前被调用。
    updated数据更新(变化)完毕被调用。

    案例展示

    关于具体的调用顺序，参考下列案例，进行控制台打印日志进行参考：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script src="../js/vues.js"></script>
	<script type="text/javascript">
	var vm = new Vue({
			el:"#app",
			data:{
				message:"8888888"
			},
			// 实例化之后，在数据观测(data observer)和 event/watcher 事件配置之前被调用
			beforeCreate:function(){
				console.log("beforeCreate....");
			},
			// 已成创建好实例，在实例创建好之后被调用
			// 此时，实例已经完成以下配置：数据观测(data observer)，属性和方法的运算，watch / event 事件回调
			// 但是，挂载阶段还未开始， $el 属性目前不可见
			created:function(){
				console.log("created....");
			},
			// 在挂载开始之前被调用：相关的渲染函数首次被调用
			beforeMount:function(){
				console.log("beforeMount....");
			},
			// 挂载成功，el 将被新创建的 vm.$el 替换
			mounted:function(){
				console.log("mounted....");
			},
			// 数据更新(变化)之前被调用
			beforeUpdate:function(){
				console.log("beforeUpdate....");
			},
			// 数据更新(变化)完毕被调用
			updated:function(){
				console.log("updated....");
			}
			// ,
			// activated:function(){
			// 	console.log("activated....");
			// },
			// deactivated:function(){
			// 	console.log("deactivated....");
			// },
			// beforeDestroy:function(){
			// 	console.log("beforeDestroy....");
			// },
			// destroyed:function(){
			// 	console.log("destroyed....");
			// }
		});
		
		// 设定5秒后，数据变更
		setTimeout(function(){
			//vm.$data.message = "99999";
			vm.message = "99999";
		},5000)
	</script>
</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
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    页面刚加载时：
    在这里插入图片描述
    页面加载5秒后，由于定时任务修改参数信息，此时控制台打印日志信息如下所示：
    在这里插入图片描述

  • 相关阅读:
    C# 第八章『多线程』◆第1节：进程与线程
    设计模式之代理模式
    关于我的家乡网页设计主题题材——梧州14页HTML+CSS网页
    什么是数据描述统计分析？（Descriptive Analysis）
    Hive基本查询语句
    面试时需要注意的事项
    java：详解http模块response对象
    java学习笔记 day03-Java基础语法
    基于Python实现的MLPNN实验
    【开源电商网站】（2），使用docker-compose和dockerfile进行配置，设置自定义的镜像，安装插件，增加汉化包，支持中文界面汉化。
  • 原文地址：https://blog.csdn.net/qq_38322527/article/details/125553236