003 V 生命周期

不二如是

                               
登录/注册后可看大图

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

每个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）



答案：

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




---



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



                               
登录/注册后可看大图



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




                               
登录/注册后可看大图

差点夹不住屁

已学习,谢谢老板

Ruide

T

suweixuan1998

T

xuan1788

T

kmq116

1可以

HanYanShuang

学习

jack6666

1

kykio

围观