• 【Vue 快速入门系列】生命周期函数简要介绍

    文章目录

    前言

    生命周期函数是必要的，有了生命周期函数可以大大简化我们的操作，可以做一些我们平时做不到的事，本篇文章对声明周期函数做一个简要的介绍，并使用一个实例告诉大家，生命周期函数的重要性。

    简介生命周期函数

    1.又名：生命周期回调函数、生命周期钩子。
    2.Vue在关键时刻帮我们调用的一些特殊名称的函数。
    3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
    4.生命周期函数中的this指向是vm 或 组件实例对象。
    下图来源张天禹老师。

    在这里插入图片描述

    都有哪些生命周期函数

    注意点：

    • 常用的生命周期钩子：
      1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
      2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

    • 关于销毁Vue实例
      1.销毁后借助Vue开发者工具看不到任何信息。
      2.销毁后自定义事件会失效，但原生DOM事件依然有效。
      3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

    其余生命周期钩子及作用：

    // 初始化数据代理、数据检测之前（在这看不到_data等属性，很多属性并未初始化、一般为null）
beforeCreate() {
	console.log('beforeCreate')
},
// 创建完数据代理、数据检测之后执行（在这可以看到_data等属性，很多属性完成初始化）
created() {
	console.log('created')
},
// 这个函数执行的时候Dom元素还是没经过vue编译的元素，在这个函数中对dom元素操作最终都不奏效
beforeMount() {
	console.log('beforeMount')
},
// dom中的元素经过了vue对象编译，这个函数中所有的操作均奏效。
mounted() {
	console.log('mounted')
},
// 数据更新前的操作（此时数据更新之后还没有同步到dom中）
beforeUpdate() {
	console.log('beforeUpdate')
},
// 数据更新后的操作
updated() {
	console.log('updated')
},
// 销毁前执行的函数（在这里面执行的修改将不起作用，但是依旧可用）
// 使用vue.$destroy()销毁vue对象
beforeDestroy() {
	console.log('beforeDestroy')
},
//已销毁
destroyed() {
	console.log('destroyed')
},
//下面两个钩子是组件激活与失活钩子（组件不展示的话会被销毁掉）
activated() {
	console.log('News组件被激活了')
	this.timer = setInterval(() => {
		console.log('@')
		this.opacity -= 0.01
		if(this.opacity <= 0) this.opacity = 1
	},16)
},
//组件失活可以进行关闭定时器等操作
deactivated() {
  console.log('News组件失活了')
  clearInterval(this.timer)
},

    • 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

    为什么要有生命周期函数

    假设现在要实现一个效果，当页面挂载完毕后页面内的文字由不透明转向透明，实现的方式是通过定时器实现，如果不使用生命周期函数，而使用普通函数，将会导致无限开启定时器，因为定时器定义在函数内，而我们调用函数需要在模板内，定时器修改数据之后会触发模板解析，模板解析后会再次触发一个定时器。周而复始，将会开启很多定时器。如果在DOM元素挂载完毕后的声明周期函数内开启定时器，只会开启一个，而且定时器改变数据之后触发模板解析不会再开启新的定时器。

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			<h2 v-if="a">你好啊h2>
			<h2 :style="{opacity}">欢迎学习Vueh2>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		 new Vue({
			el:'#root',
			data:{
				a:false,
				opacity:1
			},
			methods: {
				// 可以通过创建一个函数，并在模板中调用函数的方式进行实现
                // 但是这种方法会使函数分裂执行，函数增长应为指数级
                // 原因是函数中涉及到了模板中属性的修改，修改之后vue对象会在此更新并解析模板，
                // 模板就又一次调用函数，如此反复使得定时器函数执行的次数超级超级多（也就是同时存在很多个定时器函数在运行）
			},
			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
				console.log('mounted',this)
				setInterval(() => {
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
		})

		//通过外部的定时器实现（不推荐）
		/* setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	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
  • 相关阅读:
    壳聚糖-甲氨蝶呤|Chitosan-MTX|甲氨蝶呤-PEG-壳聚糖
    瞅瞅 Opencv：扫描图像
    太空射击第14课： 玩家生命
    ASP.NET Core - 日志记录系统(一)
    python sklearn 绁炵粡缃戠粶,sklearn 绁炵粡缃戠粶
    Java中遍历HashSet集合有哪些方法呢？
    【模型量化】AIMET文档 - AIMET TensorFlow Quantization SIM API
    JavaWeb、前端三剑客
    【Linux】基础：Linux环境基础开发工具——vim
    Dockerfile构建SpringBoot项目
  • 原文地址：https://blog.csdn.net/apple_51931783/article/details/127561196