个人笔记-----生命周期函数【如有不对，欢迎指正】

最新推荐文章于 2022-07-01 10:33:56 发布

詩酒趁年华

最新推荐文章于 2022-07-01 10:33:56 发布

阅读量171

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sinat_42664398/article/details/89608648

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

生命周期函数也称为钩子函数或是生命周期钩子函数
什么是生命周期函数：
vue实例有一个完整的生命周期，它就是从开始创建到初始化数据到挂载到渲染更新到销毁卸载一列过程，这个过程称为生命周期。简单来讲就是这个实例从创建到销毁的过程。
需要注意的是：在这些事件响应方法中的 this 直接指向的是vue实例，所以不要在选项，属性或是回调中使用箭头函数，因为箭头函数是和父级，上下级绑定在一起的，这时候的this就不是指向vue实例，容易混淆，经常出错。

钩子函数	详情	场景	备注
beforeCreate	实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined	可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些
created	实例创建完成后，data、methods 被初始化	结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时
beforeMount	挂载初始之前，完成 el 初始化，render 被初次调用	也可以发送数据请求	在服务器端渲染期间不会被调用
mounted	完成挂载	获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求	在服务器端渲染期间不会被调用
beofreUpdate	挂载开始之前调用	挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据	在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated	由于数据更改，重新渲染界面时调用	可执行依赖于 DOM 的操作	服务器端渲染期间不会被调用
activated	keep-alive 组件激活时调用		服务器端渲染期间不会被调用
deactivated	组件停用时调用		服务器端渲染期间不会被调用
beforeDestroy	实例销毁之前调用	删除前发出确认信息；清理定时器	服务器端渲染期间不会被调用
destroyed	实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁	提示已删除	服务器端渲染期间不会被调用
errorCaptured	当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。	修改组件状态	2.5.0新增

<!DOCTYPE html>
<html>
	<head>
	    <title></title>
	    <meta charset="UTF-8">
	    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
	</head>
	
	<body>
	
		<div id="app">
		    <p>{{ message }}</p>
		    <button v-on:click="change()">change</button>
		    <button v-on:click="destr()">destroy</button>
		</div>
		
		<script type="text/javascript">
		    var app = new Vue({
		        el: '#app',
		        data: {
		            message: 66
		        },
		        beforeCreate: function () {
		            console.group('beforeCreate 创建前');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        created: function () {
		            console.group('created 创建完毕');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data + JSON.stringify(this.$data));
		            console.log("message: " + this.message)
		        },
		        beforeMount: function () {
		            console.group('beforeMount 挂载前');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        mounted: function () {
		            console.group('mounted 挂载结束');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        beforeUpdate: function () {
		            console.group('beforeUpdate 更新前');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        updated: function () {
		            console.group('updated 更新完成');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        beforeDestroy: function () {
		            console.group('beforeDestroy 销毁前');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        destroyed: function () {
		            console.group('destroyed 销毁完成');
		            console.log("el: " + this.$el);
		            console.log("data: " + this.$data);
		            console.log("message: " + this.message)
		        },
		        methods: {
		            change() {
		                app.message++;
		            },
		            destr() {
		                app.$destroy();
		            }
		        }
		    })
		</script>
	</body>
</html>

在这里插入图片描述
点击change之后

点击destroy之后

詩酒趁年华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人笔记-----生命周期函数【如有不对，欢迎指正】

生命周期函数也称为钩子函数或是生命周期钩子函数什么是生命周期函数：vue实例有一个完整的生命周期，它就是从开始创建到初始化数据到挂载到渲染更新到销毁卸载一列过程，这个过程称为生命周期。简单来讲就是这个实例从创建到销毁的过程。需要注意的是：在这些事件响应方法中的 this 直接指向的是vue实例，所以不要在选项，属性或是回调中使用箭头函数，因为箭头函数是和父级，上下级绑定在一起的，这时候的th...
复制链接

扫一扫

专栏目录