Vue 生命周期

Vue 生命周期

每个 vue 实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,
我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。如果你使用过 jQuery,一定知道它的ready()方法,比如以下示例:

$(document).ready (function() { 
	// DOM 加载完后,会执行这里的代码
} );

Vue 的生命周期钩子与之类似,比较常用的有:

  • created : 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。 需要初始化处理一些数据时会比较有用
  • mounted el : 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始
  • beforeDestroy : 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

这些钩子与 el data 类似,也是作为选项写入 Vue 实例内,并且钩子的 this 指向的是调用它
的Vue 实例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
</head>
<body> 
<div id="app"></div> 
<script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
<script> 
var app =new Vue({
el : '#app', 
data: { 
	a: 2
},

created:function (){ 
console .log (this. a);	        //2
},

mounted: function(){ 
console .log (this.$el);        //
< I div> } }) </script> </body> </html>

结果展示 :

Vue 生命周期_第1张图片

你可能感兴趣的:(Vue,前端技术,前端,vue,js,vue.js)