003 V 生命周期

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了实例和数据绑定，本次来学习生命周期。

每个Vue实例创建时，都会经历一系列的初始化过程，例如：数据监听、编译模版、挂载更新DOM等。

同时也会调用相应的生命周期钩子。

我们可以利用这些钩子，在需要的时候添加我们自己的代码。

如果用过JQuery的鱼油，那么ready()方法一定不陌生哈～

例如：

1.   $(document).ready(function(){
   
2. //        DOM加载完成后，执行这里面的代码
   
3.     })

复制代码

Vue的声明周期钩子和ready（）很类似，比如created钩子：

1. new Vue({
   
2.         data: {
   
3.             a: "fishc"
   
4.     },
   
5.     created: function () {
   
6.         // `this` 指向 vm 实例
   
7.         console.log('a is: ' + this.a)
   
8.     }
   
9.     })

复制代码

可以用来在一个实例被创建之后执行我们自己的代码。

比较常用的有：

1、created，实例创建完成后调用，此阶段完成了数据的观测，当尚未挂载，$el还不可用。需要初始化处理一些数据时比较有用。

2、mounted，el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

3、beforeDestroy，实例销毁之前调用，主要解绑一些使用addEventListener监听的事件。

这些钩子与el和data类似，也是作为选项写入Vue实例内。

并且钩子的this指向的是调用它的Vue实例：

1. <div id="myApp"></div>
   
2. <script>
   
3.    var app = new Vue({
   
4.        el:"#myApp",
   
5.        data:{
   
6.            a:"fishc"
   
7.        },
   
8.        created:function(){
   
9.            console.log("加载完成，输出a："+this.a);
   
10.            console.log("加载完成，输出div："+this.$el);
    
11.        },
    
12.        mounted:function(){
    
13.            console.log("挂载到实例后，输出div："+this.$el);
    
14.        }
    
15.    })
    
16. </script>

复制代码

下图展示了实例的生命周期。

我们不需要立马弄明白所有的东西，不过随着鱼油的不断学习和使用，它的参考价值会越来越高。

先看：








---



课后作业


1、使用Vue中的created钩子可以执行我们自己的代码？（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复




---



如果有收获，别忘了评分 ：



                               
登录/注册后可看大图



这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）




                               
登录/注册后可看大图

差点夹不住屁

已学习,谢谢老板

Ruide

T

suweixuan1998

T

xuan1788

T

kmq116

1可以

HanYanShuang

学习

jack6666

1

kykio

围观