Vue2生命周期详细讲解——周期图示、代码演示变化

已于 2022-04-09 15:10:23 修改
阅读量1.3w 收藏 26
点赞数 8
分类专栏： # Vue 文章标签： vue.js javascript 前端
于 2022-02-24 22:14:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45890970/article/details/123120797
版权

Vue生命周期

生命周期

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

  2. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

  3. 生命周期函数中的this指向是vm 或 组件实例对象。

1.创建数据代理、数据检测

在这里插入图片描述

beforeCreate()

在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
此时还没有进行数据代理，数据监测，所有vm身上并没有_data的属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

	<script >
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			},
			methods: {
				add(){
					this.n++
				},
			},
			beforeCreate() {
				console.log('beforeCreate')
                console.log(this);
                // 打断点
                debugger;
			}
		})
	</script>
</html>

在这里插入图片描述

created（）

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。vm身上也存在_data属性。

new Vue({
	el:'#root',
	data:{
		n:1
	},
	methods: {
		add(){
			this.n++
		},
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
   created() {
	console.log('created')
    console.log(this);
    debugger;
  },
})

在这里插入图片描述

2. 挂载

在这里插入图片描述

beforeMount()

在挂载开始之前被调用，这时页面中的插值语法都未被解析。该钩子在服务器端渲染期间不被调用。

new Vue({
	el:'#root',
	data:{
		n:1
	},
	methods: {
		add(){
			this.n++
		},
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
          created() {
		console.log('created')
              
	},
    beforeMount() {
       console.log('beforeMount')
       console.log(this);
       debugger;
	},
})

在这里插入图片描述
在这里插入图片描述

mounted()

实例被挂载后调用，页面中的插值语法已经被解析了。该钩子在服务器端渲染期间不被调用。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick。

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

new Vue({
	el:'#root',
	data:{
		n:1
	},
	methods: {
		add(){
			this.n++
		},
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
	created() {
		console.log('created')
	             
	},
	beforeMount() {
		console.log('beforeMount')
	             
	},
	mounted() {
		console.log('mounted')
	    console.log(this);
	    debugger;
	},
})

在这里插入图片描述
在这里插入图片描述

3. 更新

在这里插入图片描述

beforeUpdate（）

在数据发生改变后，DOM 被更新之前被调用。 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。

new Vue({
	el:'#root',
	data:{
		n:1
	},
	methods: {
		add(){
			this.n++
		},
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
          created() {
		console.log('created')
              
	},
          beforeMount() {
		console.log('beforeMount')
              
	},
          mounted() {
		console.log('mounted')
	},
          beforeUpdate() {
		console.log('beforeUpdate')
              console.log(this.n);
              debugger;
	},
})

在这里插入图片描述
在这里插入图片描述

Updated（）

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

Updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick.

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

new Vue({
	el:'#root',
	data:{
		n:1
	},
	methods: {
		add(){
			this.n++
		},
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
          created() {
		console.log('created')
              
	},
          beforeMount() {
		console.log('beforeMount')
              
	},
          mounted() {
		console.log('mounted')
	},
          beforeUpdate() {
		console.log('beforeUpdate')
	},
          updated() {
		console.log('updated')
              console.log(this.n);
              debugger;
	},
})

在这里插入图片描述

4. 销毁

需要调用vm.$destroy()才会销毁（自杀）。而且需要注意，虽然vm被销毁了，但是其解析的页面（工作成果）任然保留。
在这里插入图片描述

beforeDestroy()

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
			beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
                this.add();
                console.log(this.n);
                debugger;
			},
		})
	</script>
</html>

在这里插入图片描述

destroyed()

实例销毁后调用。 该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

new Vue({
	el:'#root',
	data:{
		n:1
	},
	methods: {
		add(){
			console.log('add')
			this.n++
		},
		bye(){
			console.log('bye')
			this.$destroy()
		}
	},
	watch:{
		n(){
			console.log('n变了')
		}
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
	created() {
		console.log('created')
	},
	beforeMount() {
		console.log('beforeMount')
	},
	mounted() {
		console.log('mounted')
	},
	beforeUpdate() {
		console.log('beforeUpdate')
	},
	updated() {
		console.log('updated')
	},
	beforeDestroy() {
		console.log('beforeDestroy')
	},
          destroyed() {
		console.log('destroyed')
	}
})

在这里插入图片描述

5. activated 和 deactivated

Vue-router路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

activated（）

被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated（）

被 keep-alive 缓存的组件失活时调用。 该钩子在服务器端渲染期间不被调用。

6. errorCaptured

2.5.0+ 新增，在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

类型：(err: Error, vm: Component, info: string) => ?boolean

完整生命周期图

在这里插入图片描述

注意事项

(1)常用的生命周期钩子：

  • mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  • beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

(2)关于销毁Vue实例：

  • 销毁后借助Vue开发者工具看不到任何信息。
  • 销毁后自定义事件会失效，但原生DOM事件依然有效。
  • 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
焦妮敲代码
关注
  • 8
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浅出Vue 错误处理机制errorCaptured、errorHandler
weixin_34399060的博客
03-21 4589
引子 JavaScript本身是一个弱类型语言，项目中容易发生错误，做好网页错误监控，能帮助开发者迅速定位问题，保证线上稳定。vue项目需接入公司内部监控平台，本人之前vue errorHooks不甚了解, 决定探一探
vue的生命周期
qq_46112580的博客
03-21 400
生命周期是什么 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、销毁等一系列过程，我们称这是Vue的生命周期。 各个生命周期的作用 生命周期 描述 beforeCreate 组件实例被创建之初，组件的属性生效之前 created 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不...
Vue2和Vue3生命周期映射关系及异同
前端啤酒屋
11-06 3858
Vue的生命周期包含创建、更新、销毁等过程。看这里了解vue2与vue3的异同与映射关系。
vue2的生命周期详解（代码演示+源码）
如果相遇，那么你好哦~
08-25 7396
生命周期是vue2中一个很重要的知识点，同时也是面试中容易问到的高频面试点。熟练掌握了vue2的生命周期，可以让我们在项目开发过程中少走很多弯路，减少很多莫名其妙的bug，所以，希望本文能够对各位小伙伴有所帮助哦！
vue2的生命周期
热门推荐
Dear_pandy的博客
08-09 1万+
例如。
Vue2的生命周期
m0_62565675的博客
03-23 375
Vue2的生命周期
vue2生命周期详解
EchoLiner的博客
04-07 603
(如果没有el，等待$mount()动态挂载，如果一直不执行挂载，此时实例是创建好了，但是实例整个生命周期过程走到created就不再往下进行了，不能操作dom，只能操作实例本身内容)编译模板template：也就是编译template中的值，但是这个值还在js中，还没有去到页面上，页面还是空的读取computed时，只是读取到computed里面的每个配置项，而里面的函数不会执行，只有当代码访问了这个函数才执行里面的计算。移除数据监听，事件监听，子组件。
Vue2生命周期
xuan的博客
04-17 304
1.beforeCreate 组件实例刚刚被创建，组件属性计算之前，如data属性，el 和 data 并未初始化 2.created 组件实例创建完成，属性已绑定,但DOM还未生成，$el属性还不存在，完成了 data 数据的初始化，el没有 数据已经和data属性进行绑定 主要应用：调用数据，调用方法，调用异步函数 3.beforeMount 模版编译/挂载之前，完成了 ...
Vue2生命周期图解（详细）
03-31
Vue2生命周期图解（详细）
Vue v-for computed 生命周期和模板引用 语法示例演示代码
07-17
Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 ...
vue3.0生命周期的示例代码
10-14
主要介绍了vue3.0生命周期的相关知识，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue的属性、方法、生命周期实例代码详解
10-16
在Vue.js框架中，属性、方法和生命周期是构建组件和应用的关键组成部分。让我们深入理解这些概念，并通过提供的实例代码来详细解释它们。 首先，Vue的属性包括数据（data）、计算属性（computed）和监听属性（watch...
Vue生命周期
枫小秋 的博客
05-27 581
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 生命周期图.jpg 生命周期文字解析.jpg beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created ( 创
vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
刘大猫
05-21 1466
文章目录一、生命周期介绍二、生命周期钩子三、生命周期整体流程图（重要） 一、生命周期介绍 注意点1： 生命周期钩子函数中this指代vue对象，注意和监视属性下面图1中的this做对比，别混。 （即： 计算属性使用同步操作的普通函数，this => vue， 同步操作的箭头函数，this => window 监视属性的同步操作的普通函数，this => vue， 同步操作的箭头函数，this => window， 异步操作的普通函数，this => window， 异步操.
vue 生命周期_Vue的生命周期
weixin_39994296的博客
11-25 48
首先上文档图：可见Vue提供很多钩子函数，供我们在不同的生命周期进行操作时使用。包括：beforeCreatecreatedbeforeMountmounted：进行数据请求beforeUpdateupdatedbeforeDestroydestroyed下面我们看一组代码：<!DOCTYPE html> <html lang="en"> <head> &l...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 824
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
Vue2生命周期图示
09-15
根据提供的引用，Vue2的生命周期图示如下： beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed 在实例开始初始化时同步调用beforeCreate钩子，此时数据观测、事件等都尚未初始化。然后执行created钩子，在实例创建完成后调用，此时已经完成数据观测、事件等的初始化。 接下来，进行挂载阶段。在beforeMount钩子中，将要替换的元素挂载到Vue实例的$el属性上。然后执行mounted钩子，此时Vue实例已经挂载到页面上，可以进行DOM操作。 在数据更新时，会触发beforeUpdate钩子，在此钩子中可以对更新前后的数据进行操作。然后执行updated钩子，此钩子表示数据更新完成。 当Vue实例被销毁时，会触发beforeDestroy钩子，在此钩子中可以进行一些清理操作，比如解绑事件、销毁定时器等。然后执行destroyed钩子，此钩子表示实例已经完全销毁。 需要注意的是，所有生命周期钩子的this上下文将自动绑定至实例中，所以可以访问data、computed和methods。因此，不应该使用箭头函数来定义生命周期方法，因为箭头函数绑定了父级上下文，this不会指向预期的组件实例。 请参考上述生命周期图示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值