旧网站怎么做301跳转,杭州低价做网站,c2c网站制作,河南住房建设厅网站对于Vue的事件机制#xff0c;其实有一些高级技巧#xff0c;我们最好能够掌握。一、组件的生命周期钩子事件Vue的生命周期函数#xff0c;其实就是Vue开发者设定的一些hook钩子#xff0c;你只要往hook里面编写代码#xff0c;它就可以执行。如vue实例里的beforeCreate、…对于Vue的事件机制其实有一些高级技巧我们最好能够掌握。一、组件的生命周期钩子事件Vue的生命周期函数其实就是Vue开发者设定的一些hook钩子你只要往hook里面编写代码它就可以执行。如vue实例里的beforeCreate、created、mounted等都是钩子。但是你可能不知道在Vue当中触发钩子函数的时候也会向父组件$emit一个事件称之为hookEvent。这个事件名叫做hook以冒号的形式给它提供参数参数就是各个钩子函数的名称如下面的例子所示my-component hook:mounteddoSomething/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 hookspushTarget()const handlers vm.$options[hook] // 选项当中的生命周期函数const info ${hook} hookif (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 并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。更多内容请访问: https://www.liujiangblog.com更多视频教程请访问: https://www.liujiangblog.com/video/
