Vue 生命周期

最新推荐文章于 2024-08-15 11:39:27 发布

原创最新推荐文章于 2024-08-15 11:39:27 发布 · 934 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #vue.js

前端技术同时被 3 个专栏收录

9 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

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);        //<div id=” app ” >< I div>
}


})
</script> 
</body>
</html>