Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期；

Vue生命周期示意图：点击前往

Vue钩子函数官方文档：点击前往

Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创建、挂载、数据更新、销毁等阶段做一些事情；

Vue的生命周期钩子方法：

• beforeCreate：还没有进行数据监视和事件初始化。可以在这加个loading事件 
• created：组件示例创建完成。进行了数据监视，事件已被初始化。$el属性还不存在。在这结束loading
• beforeMount：编译了模板，但vue示例并未被挂载，因此不能进行dom操作
• mounted：vue示例已被挂载，可以进行dom操作。可以在这发起后端请求
• beforeUpdate：组件更新前调用
• updated:组件更新后调用
• beforeDestroy：vue实例删除前调用。你确认删除XX吗、 点击下一步的时候、清除定时器等等
• destroyed：vue实例删除后调用

	
		
		
		
		
	
	
		

			

			
{{msg}}
			销毁
		
	

例2 created和mounted的区别

 

created:

 html加载完成之前执行。即通常初始化某些属性值，然后再渲染成视图。

也就是说当created调用的时候，此时页面还没有被渲染成html，然后这时候通过id什么的去查找页面元素是找不到的

 

mounted:

html加载完成后执行。通常是初始化页面完成后，再对html的dom元素进行一些需要的操作。

此错误证明找不到id为msg的Dom元素。即模板还未渲染成html。所以，一般creadted钩子函数主要是用来初始化数据。

 

输出了hello，这说明这时候vue模板已经渲染完毕。

因此，Dom操作一般是在mounted钩子函数中进行的