美文网首页Vue
Vue的钩子事件和程序化侦听

Vue的钩子事件和程序化侦听

作者: liujiangblog | 来源:发表于2020-05-10 10:15 被阅读0次

    对于Vue的事件机制,其实有一些高级技巧,我们最好能够掌握。

    一、组件的生命周期钩子事件

    Vue的生命周期函数,其实就是Vue开发者设定的一些hook钩子,你只要往hook里面编写代码,它就可以执行。如vue实例里的beforeCreate、created、mounted等,都是钩子。

    但是你可能不知道,在Vue当中,触发钩子函数的时候,也会向父组件$emit一个事件,称之为hookEvent

    这个事件名叫做hook,以冒号的形式给它提供参数,参数就是各个钩子函数的名称,如下面的例子所示:

    <my-component @hook:mounted='doSomething'></my-component>
    

    上面的代码要这么读:当my-component这个子组件执行到mounted钩子函数时,会自动向父组件冒泡一个叫做hook:mounted的事件,也就是this.$emit('hook:' + 'mounted'),无论你是否在my-component中编写了具体的mounted代码。

    关于理解钩子事件,重要在于:

    • 这是从子组件向父组件自动冒泡的事件
    • 在父组件中捕获该事件并进行相应处理
    • 这不是HTML元素标签级别的事件,而是组件级别的事件,不要在普通标签上使用它

    源码分析

    在Vue的官方文档中,找不到钩子事件相关的内容,但是我们可以从源码中进行分析:

    下面是一段截取的Vue源码,注意callHook函数:

    vm._self = vm
    initLifecycle(vm) // 初始化生命周期
    initEvents(vm) // 初始化事件
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    

    可以看出,生命周期函数是通过callHook这个函数调用的。我们去看看callHook函数的源代码:

    export function callHook (vm: Component, hook: string) {
      // #7573 disable dep collection when invoking lifecycle hooks
      pushTarget()
      const handlers = vm.$options[hook] // 选项当中的生命周期函数
      const info = `${hook} hook`
      if (handlers) {
        for (let i = 0, j = handlers.length; i < j; i++) {
          invokeWithErrorHandling(handlers[i], vm, null, vm, info)
        }
      }
      if (vm._hasHookEvent) {
        vm.$emit('hook:' + hook)
      }
      popTarget()
    }
    

    下面这段,就是钩子事件的出处了:

      if (vm._hasHookEvent) {
        vm.$emit('hook:' + hook)
      }
    

    根据不同hook的具体名字(created、mounted等等),组合钩子事件的字符串名,然后emit。

    钩子事件为我们控制和响应子组件的变化,提供了新的、便捷的手段。

    二、程序化的事件侦听器

    我们知道 $emit 冒泡的事件,可以被 v-on 指令侦听。但是,所有写在模板上的v-on代码都是固定的,编译前就写好的,无法动态修改。这样不灵活,也满足不了所有的需求,我们需要类似编程语言能力的动态设置能力。

    Vue很贴心的为我们提供了下面三个方法,让我们能够以程序化的方式侦听、停止事件:

    • $on(eventName, eventHandler) :侦听一个事件
    • $once(eventName, eventHandler) :一次性侦听一个事件
    • $off(eventName, eventHandler) :停止侦听一个事件

    那么程序化的事件处理有什么优点呢?

    看下面的例子,假设你要集成一个第三方库,这个库的作用是将一个日期选择器附加到一个输入框上,然后在母组件被销毁之前,先把这个库的实例销毁了。最朴素的做法是在母组件的mounted钩子处自动挂载库实例,然后在beforeDestroy钩子处自动销毁库实例:

    // 一次性将这个日期选择器附加到一个输入框上
    // 它会被挂载到 DOM 上。
    mounted: function () {
      // Pikaday 是一个第三方日期选择器的库
      this.picker = new Pikaday({
        field: this.$refs.input,
        format: 'YYYY-MM-DD'
      })
    },
        
        
    // 在组件被销毁之前,
    // 也销毁这个日期选择器。
    beforeDestroy: function () {
      this.picker.destroy()
    }
    

    但是这么做有两个潜在的问题:

    • 需要在这个组件实例中保存这个 picker实例,如果可以的话最好只有生命周期钩子可以访问到它。虽然这并不算严重的问题,但是它可以被视为“杂物”。
    • 创建库实例的代码独立于清理库实例的代码,这使得我们比较难于程序化地清理我们建立的所有东西。

    解决问题的最佳办法是,钩子事件配合程序化的侦听器:

    mounted: function () {
      var picker = new Pikaday({
        field: this.$refs.input,
        format: 'YYYY-MM-DD'
      })
        // 注意看这里
      this.$once('hook:beforeDestroy', function () {
        picker.destroy()
      })
    }
    

    $once绑定的事件只能被执行一次,完美适合销毁场景。

    使用了上面的策略,我甚至可以让不同的输入框元素使用不同的 Pikaday,每个新的实例都程序化地在后期清理它自己:

    mounted: function () {
      this.attachDatepicker('startDateInput')
      this.attachDatepicker('endDateInput')
    },
    methods: {
      attachDatepicker: function (refName) {
        var picker = new Pikaday({
          field: this.$refs[refName],
          format: 'YYYY-MM-DD'
        })
    
        this.$once('hook:beforeDestroy', function () {
          picker.destroy()
        })
      }
    }
    

    实际上,对于上面的需求,更普遍更适合的方法还是抽象出一个可以复用的组件。

    注意 Vue 的事件系统不同于浏览器的 EventTarget API。尽管它们工作起来是相似的,但是 $emit$on, 和 $off 并不是 dispatchEventaddEventListenerremoveEventListener 的别名。

    更多内容请访问: https://www.liujiangblog.com

    更多视频教程请访问: https://www.liujiangblog.com/video/

    相关文章

      网友评论

        本文标题:Vue的钩子事件和程序化侦听

        本文链接:https://www.haomeiwen.com/subject/ljidnhtx.html