vue-钩子函数

钩子函数：允许我们定义vue，在特定的时期执行其他事情

vue中的钩子函数包括：

生命周期钩子函数

路由的钩子函数

自定义指令的钩子函数

一、生命周期的钩子函数

1、生命周期阶段

  • 3个：加载期、更新期、销毁期
  • 4个：初创期、挂载期、更新期、销毁期

2、生命周期钩子函数

  • beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

  • created

在实例创建完成后被立即调用

  • beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用

该钩子在服务器端渲染期间不被调用

  • mounted

实例被挂载后调用

此时页面加载完毕

  • beforeUpdate

数据更新时调用

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行

  • update

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

  • beforeDestroy

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

该钩子在服务器端渲染期间不被调用

  • destroyed

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

该钩子在服务器端渲染期间不被调用

  • activated

被 keep-alive 缓存的组件激活时调用

该钩子在服务器端渲染期间不被调用

  • deactivated

被 keep-alive 缓存的组件停用时调用

该钩子在服务器端渲染期间不被调用

  • errorCaptured

当捕获一个来自子孙组件的错误时被调用

二、自定义指令的钩子函数

1、常用钩子函数

  • bind

在指令第一次绑定到元素时调用（在该环节中是获取不到父节点的，父节点是null）。在这里可以进行一次性的初始化设置。

  • unbind

指令和元素解绑的时候调用一次

  • update

数据更新时调用（重复触发）

  • componentUpdate

指令所在的组件以及子组件全部更新后调用

  • inserted

被绑定元素插入父节点时调用（在该环节中是可以获取到父节点的）

2、钩子函数的参数

  • el：指令所绑定的元素，可直接操作DOM
  • binding：是个对象
  • name：指令名，不包含 v-
  • value：指令的绑定值

例如：v-color=“red” 中绑定值为 red

  • oldValue：指令的前一个绑定值

仅在 update 和 componentUpdated 钩子中可用

无论值是否改变都可用

  • expression：字符串形式的表达式
  • arg：传给指令的参数，可选
  • modifiers：一个包含修饰符的对象
  • vnode：vue编译生成的虚拟节点
  • oldVnode：上一个虚拟节点

仅在 update 和 componentUpdated 钩子中可用

三、路由的钩子函数

1、路由的钩子函数包括

  • 全局钩子函数
  • 路由独享的钩子函数
  • 组件内的钩子函数

2、全局钩子函数

  • 全局前置钩子函数router.beforeEch
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
  • 全局后置钩子函数router.beforeResolve
  • 全局解析函数router.afterEach
router.afterEach((to, from) => {
  // ...
})

3、路由独享钩子函数

  • beforeEnter
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4、组件内的钩子函数

  • beforeRouteEnter
const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
  • beforeRouteUpdate (2.2 新增)
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
}
  • beforeRouteLeave
beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
}

——————————————————
“没有什么能够阻挡，努力努力再努力 ”