4.vue文档API（2），简单的生命周期描述

最新推荐文章于 2022-11-25 18:09:47 发布

「已注销」

最新推荐文章于 2022-11-25 18:09:47 发布

阅读量141

点赞数

分类专栏： vue简介文章标签： vue

本文链接：https://blog.csdn.net/weixin_47870554/article/details/107050274

版权

vue简介专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue与实例vue：

可以看出，vue框架，有些类似jQuery，对外的接口就是一个Vue对象，然后使用new的，创建一个Vue的实例对象，根据指定的id渲染元素，构建组件。而每个实例vue都被规定了生命周期。（Vue的配置属性，可以看作独立于声明周期，对Vue插件本身的设置）。

生命周期：

vue实例的生命周期有如下几种。

beforeCreate、created

beforeCreate是创建实例之前，created是创建实例完成之后。

创建实例，就是传入对象，然后new Vue({...})。Vue会根据对象内的属性信息，初始化Vue实例，创建对应的信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div class="app" v-bind:src="message">
		<p>{{ message }}</p>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		new Vue({
			data: function(argument) {
				return {
					message: 'Hello Vue!'
				}
			},
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
		});
	</script>
</body>
</html>

可以看到，传入的对象中，初始化了data、beforeCreate、created、beforeMount、mounted五个属性，new的时候，触发了beforeCreate、created两个属性设定的函数。

beforeMount、mounted属于挂载才会触发的函数。这是虽然初始化了，但是由于new的时候，并没有挂载，所以并没有触发。

beforeMount、mounted

挂载，就是将vue实例挂载到指定的dom元素，然后进行渲染。通过添加对应el属性实现（el可以添加id、class、标签名，不过都只会挂载到第一个元素上）。将部分代码改成如下：

	<div class="app" v-bind:src="message">
		<p>{{ message }}</p>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		new Vue({
			el: '.app',
			data: function(argument) {
				return {
					message: 'Hello Vue!'
				}
			},
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
		});
	</script>

beforeUpdate、updated

更新，就是当挂载的dom元素中，有内容发生变化的时候，就会触发的函数。部分代码改成如下：

	<div class="app" v-bind:src="message" v-on:click="click">
		<p>{{ message }} {{count}}</p>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		new Vue({
			el: '.app',
			data: function(argument) {
				return {
					message: 'Hello Vue!',
					count: 0,
				}
			},
			methods: {
				click: function(){
					this.count++;
				}
			},
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
			beforeUpdate: function(){
				console.log('更新之前');
			},
			updated: function(){
				console.log('更新');
			},
		});
	</script>

点击文字，更改数据，就会触发相关的更新函数。

beforeDestroy、destroyed：

组件的销毁，通过$destroy()函数，将组件销毁。

			methods: {
				click: function(){
					this.count++;
					console.log("正在销毁");
					this.$destroy();
				}
			},

点击文本，就可以看到，触发了beforeDestroy、destroyed函数。可以看到数字不再变化，但是多点几下，依旧会显示文字"正在销毁"。

个人认为，销毁的只是，vue实例中，data数据和dom节点中的响应式关系，不是dom节点，也不是实例本身。

activated、deactivated：

只有处于<keep-alive>标签内的实例才会拥有activated、deactivated周期，keep-alive标签可以用来缓存vue组件。这里只做简单的演示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div class="app">
		<keep-alive>
			<demo></demo>
		</keep-alive>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		var demo = {
			template: `<p v-on:click="click">{{ message }} {{count}}</p>`,
			data: function(argument) {
				return {
					message: 'Hello Vue!',
					count: 0,
				}
			},
			methods: {
				click: function(){
					this.count++;
					console.log("正在销毁");
					this.$destroy();
				}
			},
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
			beforeUpdate: function(){
				console.log('更新之前');
			},
			updated: function(){
				console.log('更新');
			},
			beforeDestroy: function(){
				console.log('销毁之前');
			},
			destroyed: function(){
				console.log('销毁');
			},
			activated (){
				console.log("激活 activated");
			},
			deactivated (){
				console.log("停用 deactivated");
			},
		}
		new Vue({
			el: '.app',
			components: {
				'demo': demo,
			},
		});
	</script>
</body>
</html>

当父组件被销毁之前，会触发停用deactivated。

errorCaptured

当下级组件报出错误的时候，会出现，接收三个参数，err：错误信息, vm：抛出错误的实例, info：不确定，个人认为代表是抛出错误的源头。返回Boolean值，用来确定错误的信息会不会继续向上面的组件传递。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div class="app">
		<keep-alive>
			<demo></demo>
		</keep-alive>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		var demo = {
			template: `<p v-on:click='throwError'>{{ message }} {{count}}</p>`,
			methods: {
				throwError: function(){
					throw new Error('errorCaptured测试')
				}
			},
			data: function(argument) {
				return {
					message: 'Hello Vue!',
					count: 0,
				}
			},
		}
		new Vue({
			el: '.app',
			components: {
				'demo': demo,
			},
			errorCaptured: function(err, vm, info){
				console.log(err);
				console.log(vm);
				console.log(info);
				return false;
			},
		});
	</script>
</body>
</html>

点击文本就会打印抛出的错误信息。

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.vue文档API（2），简单的生命周期描述

全局 API：在vue中可以直接调用的接口。Vue.extend( options )：最基础的 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。属于生命周期中的beforeCreate，但是未正式创建、挂载。...
复制链接

扫一扫