也谈Vue2.0生命周期和路由

[hawx1993]

为了探明vue生命周期的执行顺序，我们可以写一个简单的demo，在vue单文件组件里：

<template>
    <div class="list-container">
    </div>
</template>
<script>
     data() {
            return{
                num: 1
            }
        },
       beforeCreate(){
            console.log('beforeCreate',this.$el,this.num);
        },
       created(){
             console.log('created',this.$el,this.num);
        },
        beforeMount(){
            console.log('beforeMount',this.$el,this.num)
        },
        mounted(){
            console.log('mounted',this.$el,this.num)
        },
        beforeUpdate(){
            console.log('beforeUpdate',this.$el,this.num)
        },
       updated(){
            console.log('updated')
       }
</script>

从控制台的输出我们可以看出

//按照执行顺序从上往下，执行过程是：创建=>挂载=>更新=>卸载
beforeCreate(){}: 数据和实例都不可访问
created(){}:数据可以访问，实例不可访问
beforeMount(){}: DOM挂载前，数据可访问，实例$el为虚拟DOM节点（不可访问），数据没有插入DOM
mounted(){}: DOM挂载后，数据实例都可访问，$el为真实DOM元素，数据已插入DOM
beforeUpdate(){}:组件更新之前
updated(){}:组件更新之后

综上，可以总结如下：

实例指的是el，即当前模板根节点（vue单文件组件template的根节点），this对象都是可以访问的。

在等待DOM更新之后，我们可以使用：

this.$nextTick(function () {
//DOM 更新后
});

从源码窥探

从源码中，我们可以看出，有如下几个生命周期的钩子函数

 /**
   * List of lifecycle hooks.
   */
  _lifecycleHooks: [
    'beforeCreate',
    'created',
    'beforeMount',
    'mounted',
    'beforeUpdate',//数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    'updated',//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    'beforeDestroy',
    'destroyed',
    'activated',//keep-alive 组件激活时调用。
    'deactivated'//keep-alive 组件激活时调用。
  ],

路由与页面刷新

从a路由进入到b路由，会存在数据缓存的情况，可以在keep-alive里使用exclude禁用掉a页面缓存，默认是有缓存的，会导致重复进入页面不再重复请求接口数据：

<keep-alive include="a">
        <router-view></router-view>
    </keep-alive>

vue-router的beforeRouteEnter速度比mounted快，但在beforeRouteEnter的next回调(此时才能访问this)中就比mounted慢了

vue单页面应用里，从a页面进入b页面，再从b路由通过点击事件自动跳转到a路由并刷新a页面，可以使用：

beforeRouteLeave: function(){
    window.location.reload();
}

或者在点击事件中添加回调，通过setTimeout刷新页面

单页面下拉数据滚动问题

一般下拉滚动加载数据都是通过监听window对象触发的，而在单页面应用中，嵌套的多个路由其实是共用一个window对象的，这就会导致，从a路由进入b路由，刷新b页面的数据，容易造成重复请求a页面的数据。解决办法可以是（仅供参考）：

• 在下拉刷新组件中提供禁用和启用功能（在updated里，通过this.$route.name查询当前页面路由，在从a路由进入其他页面中，禁用掉该功能。其他页面需要启用的可以在mounted里进行初始化，将请求数据的方法写在methods对象里）

搞明白了vue生命周期和路由，开发vue单页面应用也就简单多了

[AntonSmir]

厉害厉害~