Vue2.0学习笔记-12、生命周期、生命周期函数(又名生命周期钩子，又名生命周期事件)

最新推荐文章于 2023-09-13 22:52:57 发布
最新推荐文章于 2023-09-13 22:52:57 发布
阅读量66 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41364246/article/details/109775766
版权

这里写目录标题

1、什么是生命周期?

所谓生命周期：就是指一个Vue示例从创建、运行一直到销毁的过程，(相当于人的一生，从出生到死亡)

2、什么是生命周期函数(又名生命周期钩子，又名生命周期事件)？

在一个Vue实例的生命周期内，总会发生各种各样的事件(函数)，这些事件(函数)称为生命周期函数(又名生命周期钩子，生命周期事件)，什么事件、函数、钩子，其实都是一回事，就是一个函数，(相当于你叫张三，家里叫你小名三儿，同学叫你外号三胖子，老师叫你大名张三，无论怎么称呼，其实都是你)

3、生命周期图解

在这里插入图片描述

4、beforeCreate和created钩子示例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'我是data中的数据'
				},
				methods:{
					show:function(){
						console.log('我是methods中的方法');
					}
					
				},
				beforeCreate:function(){
					console.log(this.msg);
					this.show();

				},
				created:function(){
					console.log(this.msg);
					this.show();
				}
			});
		</script>
	</body>
</html>

执行效果

在这里插入图片描述

5、beforeMount和mounted钩子示例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'我是data中的数据'
				},
				methods:{
					show:function(){
						console.log('我是methods中的方法');
					}
					
				},
				beforeMount:function(){
					console.log(document.getElementById('app').innerText);

				},
				mounted:function(){
					console.log(document.getElementById('app').innerText);
				}
			});
		</script>
	</body>
</html>

执行效果

在这里插入图片描述

6、beforeUpdate和updated钩子示例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<button type="button" @click="changeData">更新dom中的数据</button>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'我是data中的数据'
				},
				methods:{
					show:function(){
						console.log('我是methods中的方法');
					},
					changeData:function(){
						this.msg='我已经被改变了';
					}
					
				},
				beforeUpdate:function(){
					console.log(this.msg);
					console.log(document.getElementById('app').innerHTML);
				},
				updated:function(){
					console.log(this.msg);
					console.log(document.getElementById('app').innerHTML);
				}
			});
		</script>
	</body>
</html>

执行效果

点击按钮前：
在这里插入图片描述
点击按钮后：
在这里插入图片描述

6、无beforeDestroy和destroyed钩子示例

不收藏找不到我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - 生命周期钩子函数（组合式 API）
王佳斌
11-13 3593
Vue3.0生命周期钩子函数官方文档，Vue3组合式 API之生命周期钩子，Vue3:组合式 API:生命周期钩子(在setup阶段被同步调用)，Vue3 组合式 API | 菜鸟教程，Vue3-组合式API学习之生命周期钩子函数，Vue3中组合式API中的生命周期钩子，Vue3.x 组合式api的生命周期钩子，Vue3——Hook函数 & 生命周期，Vue 3.0笔记——组合式API(介绍)，Vue3 - 生命周期钩子函数（组合式 API）
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
【微信小程序开发】生命周期与生命周期函数
轻舟终过万重山
07-28 1032
小程序应用、页面、组件的生命周期及其各自对应的生命周期函数
vue3生命周期及生命周期函数（钩子函数）详解通俗易懂
木子木木的专栏
04-13 1万+
一，什么是生命周期： Vue实例从创建到销毁的过程，就是生命周期。就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，在vue生命周期中提供了一系列的生命周期函数，如下图所示： 二，生命周期函数： 在某一时刻会自动执行的函数 1，beforeCreate: 在vue实例生成前,初始化后 会自动执行的函数（此时vue实例并未完全创建出来） 2，created: 在vue实例创建完成之后会自动执行的函数（vue实...
vue生命周期
热门推荐
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
生命周期与生命周期函数
ygpigu的博客
10-10 137
现在我们来了解一下vue实例的生命周期 const vm = new Vue({ el: '#app', data: { list: [] }, methods: {}, }) 我们创建一个vue实例，一个vue实例，也分为三个阶段：创建阶段、运行阶段、销毁阶段 在实例运行的三个阶段中，总是伴随着各种各样的事件，称为：生命周期函数或者生命周期钩子或者生命周期事件，以上叫法都
【Vue】学习笔记-Vue生命周期钩子
weixin_49202767的博客
02-27 1002
【Vue】学习笔记-Vue生命周期钩子Vue生命周期钩子vue实例vue实例生命周期钩子总结 Vue生命周期钩子 页面加载时，主动执行某些程序，比如 之前在写methods时候，一般会在里面指定一些方法，比如getData获取数据 methods:{ getData(){ //do ajax } } 当我们打开一个网页的时候，网页直接显示数据而不是打开某个事件之后再显示数据，会在组件加载的时候直接显示列表，所以通过事件触发来调用getData()是无法满足要求的，生命周期钩
【Vue】学习笔记-Vue生命周期
德仔
04-21 500
总结常用的生命周期钩子a.mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作b.清除定时器、解绑自定义事件、取消订阅消息等收尾工作关于销毁Vue实例a. 销毁后借助vue开发者工具看不到任何信息b. 销毁后自定义事件会失效，但原生DOM事件依然有效c. 一般不会在操作数据，因为即便操作数据，也不会再触发更新流程。
Vue入门学习笔记-Vue基本语法（插值表达式、生命周期和钩子函数）
最新发布
woaixuexi___的博客
09-13 148
（插值表达式用户把vue中所定义的数据,显示在页面上.插值表达式允许用户输入"JS代码片段")语法：{{变量名/对象.属性名}}
深入浅出 Vue.js 学习笔记--生命周期
isfor_hhj的博客
08-07 494
Vue.js的整体生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段和卸载阶段。初始化阶段结束后，会触发created钩子函数。在created钩子函数与beforeMount钩子函数之间的这个阶段是模板编译阶段，这个阶段在不同的构建版本中不一定存在。挂载阶段在beforeMount钩子函数与mounted期间。挂载完毕后，Vue.js处于已挂载阶段。已挂载阶段会持续追踪状态的变化，当...
VueBasicLearning:Vue 2.0学习笔记
03-16
理解组件的生命周期有助于优化代码和处理复杂场景，例如在`created`、`mounted`、`updated`等钩子函数中执行特定任务。 4. **指令与修饰符**：Vue提供了一系列内置指令，如`v-if`、`v-for`、`v-bind`、`v-on`等，...
vue-source-code:learn vue source code Vue2.0源码学习笔记
04-28
Vue的生命周期钩子函数提供了一组预定义的方法，如`beforeCreate`、`created`、`beforeMount`、`mounted`等，让开发者在组件的不同阶段插入自定义逻辑。通过查看源码，我们可以了解到这些钩子函数的调用顺序以及它们...
详解Vue2.x-directive的学习笔记
12-12
自定义指令的生命周期包含以下几个钩子函数： 1. `bind`: 当元素首次绑定指令时调用，仅执行一次，常用于初始化设置。 2. `inserted`: 元素被插入到其父节点时调用，可能此时仍处于虚拟DOM状态。 3. `update`: 当...
vue学习笔记之vue1.0和vue2.0的区别介绍
08-30
3. **生命周期钩子的变化**： Vue 1.0 的生命周期包括 `init`、`created`、`beforeCompile`、`compiled`、`ready`、`beforeDestroy` 和 `destroyed`。Vue 2.0 对这些钩子进行了调整和优化，引入了新的钩子，同时...
vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions
weixin_41364246的博客
06-04 6029
一边学习vue3.x，一边实践，最近在做项目时，使用computed引入store中state的数据时，总是觉得很麻烦，想起新版兼容2.x,就想着引入mapState，可是怎么用都不对劲。后来，突然间醒悟过来，<font color=red>**使用toRef或toRefs，就能实现mapState、mapGetters效果。**</font> 1、示例代码 ...
Vue2.0学习笔记-5、v-model指令实现双向数据绑定(唯一一个能够实现双向数据绑定的指令)
weixin_41364246的博客
11-10 696
1、什么是数据双向绑定？ 所谓的数据双向绑定就是用户对界面的操作可以实时的同步到数据中，同时，数据又会展示到界面上。话不多说，看下面的例子： 代码： 这里通过v-bind指令实现数据绑定，注意，这里的数据绑定不是双向绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsde
Vue2.0学习笔记-6、vue中如何使用样式-(1)使用class样式(v-bind指令的应用)
weixin_41364246的博客
11-10 629
以下都是通过v-bind指令实现标签绑定class样式 (1)数组 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .red{ color:red } .thin{ font-weight: thin; } .italic{
Vue2.0学习笔记-7、v-for指令以及key属性的使用、注意事项
weixin_41364246的博客
11-11 588
v-for指令很像原生js中的foreach方法。 v-for指令的使用1、使用v-for指令遍历普通数组(1)语法(2)示例2、使用v-for指令遍历对象数组(1)语法(2)示例3、使用v-for指令遍历对象(1)语法(2)示例4、使用v-for指令遍历数字(1)语法(2)示例5、重点：v-for指令中key属性的搭配使用不使用key属性使用key属性使用key属性时的注意事项 1、使用v-for指令遍历普通数组 (1)语法 第一种调用方式 v-for="参数一，参数二 in 变量" 第二种调用方式 v
Vue入门指南：指令、组件与生命周期解析
在Vue的学习笔记中，我们涵盖了多个关键概念，包括MVVM模式、全局配置、实例配置、指令、生命周期、组件以及全局API和实例属性。 1. **MVVM**： MVVM模式是Vue的核心，它将Model、View和ViewModel紧密联系起来。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值