003 V 生命周期
本帖最后由 不二如是 于 2018-8-30 11:21 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了实例和数据绑定，本次来学习生命周期。
每个Vue实例创建时，都会经历一系列的初始化过程，例如：数据监听、编译模版、挂载更新DOM等。
同时也会调用相应的生命周期钩子。
我们可以利用这些钩子，在需要的时候添加我们自己的代码。
如果用过JQuery的鱼油，那么ready()方法一定不陌生哈～
例如：
$(document).ready(function(){
// DOM加载完成后，执行这里面的代码
})
Vue的声明周期钩子和ready（）很类似，比如created钩子：
new Vue({
data: {
a: "fishc"
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
可以用来在一个实例被创建之后执行我们自己的代码。
比较常用的有：
1、created，实例创建完成后调用，此阶段完成了数据的观测，当尚未挂载，$el还不可用。需要初始化处理一些数据时比较有用。
2、mounted，el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
3、beforeDestroy，实例销毁之前调用，主要解绑一些使用addEventListener监听的事件。
这些钩子与el和data类似，也是作为选项写入Vue实例内。
并且钩子的this指向的是调用它的Vue实例：
<div id="myApp"></div>
<script>
var app = new Vue({
el:"#myApp",
data:{
a:"fishc"
},
created:function(){
console.log("加载完成，输出a："+this.a);
console.log("加载完成，输出div："+this.$el);
},
mounted:function(){
console.log("挂载到实例后，输出div："+this.$el);
}
})
</script>
下图展示了实例的生命周期。
我们不需要立马弄明白所有的东西，不过随着鱼油的不断学习和使用，它的参考价值会越来越高。
先看：
课后作业
1、使用Vue中的created钩子可以执行我们自己的代码？（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 已学习,谢谢老板 T T T 1可以 学习
1 围观
页:
[1]