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

文章目录

    • 前言
    • 简介生命周期函数
    • 都有哪些生命周期函数
    • 为什么要有生命周期函数

前言

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

简介生命周期函数

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


【Vue 快速入门系列】生命周期函数简要介绍_第1张图片

都有哪些生命周期函数

注意点:

  • 常用的生命周期钩子:
    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)
},

为什么要有生命周期函数

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

你可能感兴趣的:(网页前端高级编程从入门到精通,vue.js,javascript,前端)