小程序生命周期钩子函数怎么用，vue钩子函数使用场景

Vue 页面在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，开发人员可以在不同阶段添加自己的代码,生命周期详细图例如下:

生命周期图例(来源于Vue官网)

beforeCreate钩子函数

Lifecycle主要完成一些属性初始化，Events初始化父元素给子节点绑定的一些事件。

created钩子函数

在这一步，实例已完成以下的配置：数据观测 (data observer)，property 属性和方法的运算，watch/event 事件回调。

beforeMount钩子函数

页面中的内容还是vue中的占位符，data中的message信息没有被挂载到BOM节点中，在渲染前该钩子函数是最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

mounted钩子函数

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意: mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
  })
}

beforeUpdate钩子函数

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated钩子函数

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意: updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    //如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：
  })
}

beforeDestroy钩子函数

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed钩子函数

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

注意: 所有的生命周期钩子自动绑定 this上下文到实例中，因此你可以访问数据，对 property属性 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期的方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父级上下文，因此 获取的this与你期待获取的Vue 实例不同。

vue中有哪些常用的钩子函数

vue中有哪些常用的钩子函数：

1.生命周期

2.路由钩子

3.keep-alive两个钩子( activated()  deactivated())

4.自定义指令

生命周期

1.beforeCreate

在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化  什么都做不了

2.created

 在实例创建完成后被立即调用此时data 和 methods已经可以使用  但是页面还没有渲染出来

3.beforeMount

在挂载开始之前被调用  此时页面上还看不到真实数据 只是一个模板页面而已

4.mountedel

被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。  数据已经真实渲染到页面上  在这个钩子函数里面我们可以使用一些第三方的插件

5.beforeUpdate

数据更新时调用，发生在虚拟DOM打补丁之前。  页面上数据还是旧的

6.updated

由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的

7.beforeDestroy    

实例销毁之前调用

8.destroyed            

实例销毁后调用

vue-router 路由钩子函数(导航守卫）：

路由钩子函数有三种：

全局钩子： beforeEach(全局前置守卫)、 afterEach(全局后置钩子)

路由独享的守卫(单个路由里面的钩子)： beforeEnter

组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

路由导航守卫：–beforeEach(全局前置守卫)

keep-alive

keep-alive有两个钩子函数：

actived: 在激活的时候的使用，第一次激活实在mounted之后执行

dectived:在失活的时候使用。

除此之外，keep-alive还提供了三个属性

1.include ：记录的是哪些组件可以被缓存

2.exclude:  记录了哪些组件不能被缓存

3.max: 记录的是可以缓存组件的最大数量

vue的钩子函数有路由钩子函数和生命周期钩子函数。生命周期钩子函数有八个，有创建前后，挂载前后，更新前后，销毁前后，在这八个钩子函数中常用的是创建后和挂载完成用的比较多，基本上都能满足大部分的业务了。

路由钩子函数有全局钩子，单个路由里面的钩子，组件级路由钩子。