Vue的生命周期简述

最新推荐文章于 2021-06-01 20:41:43 发布

Love_云宝儿

最新推荐文章于 2021-06-01 20:41:43 发布

阅读量180

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_38084879/article/details/117201280

版权

Vue生命周期 beforeCreate created 回调函数组件初始化

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

首先，什么是生命周期？我个人的理解就是：一个事物从诞生到消亡的过程。

比如你 new Vue();Vue的生命周期已经开始了。

我们打开Vue.js的源码，当我们new Vue({});的时候，其实调用了下面这个方法：

虽然我们只new了一个Vue，但实际上它已经执行了很多个方法，比如initMixin(vue)，stateMixin(vue)等等

我们可以利用Vue的生命周期，调用它的回调函数，换句话说，我们调用不同的回调函数，可以在Vue的生命周期中，执行我们设置的回调函数。是不是有点绕？哈哈，来看代码：

注：回调函数也叫生命周期函数或者钩子函数（callHook()是Vue的回调函数，hook英文意思“钩子”）

上面的initMixin方法的源码如下：

我们可以调用两个函数，分别是beforeCreate和created（分别在Vue创建前和创建后执行），我们一般会把一些网络请求放入created回调函数中。注意，不要把回调函数写在methods里面，回调函数是与methods同级的！！！代码如下：

<!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">
			<div>计数器：{{num}}</div>
		</div>
	</body>
</html>
<script>
	const app = new Vue({
	//	el:document.querySelector('#app'),//传入的Element，和直接传入#app是一样的
		el:"#app",
		data:{
			"num":0
		},
		methods:{
			
		},
		beforeCreate:function(){
			console.log("我是创建前执行的");
		},
		created:function(){
			console.log("我是创建后执行的");
		}
	});
</script>

执行结果：