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`
  }
  

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