Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护

简介: Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
回调函数(Callback Function):

回调函数是一种将函数作为参数传递给其他函数的机制。当特定的操作或事件完成后,回调函数会被调用并执行相应的代码逻辑。回调函数通常用于异步编程和事件驱动的编程模型中。

var a = 0
 
function bb(x) {
    console.log(x)
}
 
function timer(time, callback) {
    setTimeout(function () {
        a = 6
        callback(a);
    }, time);
}
 
//调用:
console.log(a)
timer(3000,bb)

钩子方法(hook method)

钩子方法(hook method)是回调函数(callback function)的一种。钩子方法是一种软件设计模式,在该模式中,一个类定义了一个模板方法,其中一部分代码是固定的,另一部分代码可以由子类通过实现钩子方法来自定义。这样也更好了进行了抽象化:将经常变化的内容抽象暴露出去,将固定不变的代码进行封装。


Vue的各生命周期,其实就是Vue开发者规定的一些hook,和git里面规定的hook类似,你只要往hook里面填自定义内容,它就可以执行。如vue实例里的beforeCreate,created,mounted等,都是hook。

示例1(定时器的使用与销毁)
  • 我们一般都是这样操作的:

1、vue实例中需要有这个定时器的实例,感觉有点多余。

2、创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;

<script>
  export default {
    data() {
      return {
      timer: null
    }
    },
    mounted() {
      this.timer = setInterval(() => { ... }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>
  • 其实更好的做法是这样:

用 hook来监听 beforeDestory 生命周期。因为只要监听一次就够了,所以用$once来注册监听。

<script>
  export default {
    mounted() {
      const timer = setInterval(() => { ... }, 1000)
      this.$once('hook:beforeDestroy', () => clearInterval(timer))
    }
  };
</script>
示例2(监听组件生命周期)

在mounted中添加一个监听需要在beforeDistroy中移除这个监听,考虑到某些原因你不想再写个beforeDistroy去实现,这时候我们可以使用 hook。

mounted () {
  window.addEventListener('online', this.handleOnline)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('online', this.handleOnline)
  })
},

尽管它们工作起来是相似的,但是 $emit、$on, 和 $off并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。


示例3(父组件监听子组件的生命周期)

父组件如何在子组件的mounted生命周期里做某些处理?

你首先想到的是不是在子组件 mounted周期中 emit 父组件?

  • 普通写法
// 父组件中这样写
<child-component @childMounted="handleChildMounted"></child-component>
// 子组件中这样写
mounted () {
  this.$emit('childMounted')
},
  • 更好写法
// 父组件中这样写
<child-component @hook:mounted="handleChildMounted"></child-component>
// 子组件中不用写东西
mounted () {},

直接使用 @hook 在父组件中监听子组件中的钩子函数,不需要在子组件中 $emit 一次。当然我们还可以监听 Vue 中的其他钩子函数,如 @hook:created,@hook:destroyed 等。

示例4(监听第三方组件的生命周期)

你用的是第三方的组件库,你需要在这个组件渲染或发生改变时候做一些操作,巧了这个组件还没有实现相应的回调,你怎么办呢,这个时候你就可以使用hook了!

<el-calendar 
@hook:mounted="calendarRender"
@hook:updated="calendarUpdated"
>
</el-calendar>

动态指令用法

$on

使用:vm.$on(‘事件名称’,callback)

说明:监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。


$once

使用:vm.$once(‘事件名称’,callback)

说明:监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。


$off

使用:vm.$off(‘事件名称’,callback)

说明:移除自定义事件监听器


$emit

使用:vm.$emit(‘事件名称’,args)

说明:子组件向父组件传递通信的方式


目录
打赏
0
0
0
0
12
分享
相关文章
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
152 1
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
68 12
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
70 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
111 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
68 1
vue学习第一章

热门文章

最新文章