VUE3.0 事件模式改

最新推荐文章于 2023-08-27 17:09:48 发布

lazy_余

最新推荐文章于 2023-08-27 17:09:48 发布

阅读量185

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yu305306/article/details/124923318

版权

在3.0时代，如果你的项目没有要兼容IE的需求。（现在政府很多网站都不兼容IE了，醒醒吧，现在只会IE8的基本只会微信打视频，连支付功能都不会用的）

3.0 很多功能都百花齐放中。

特别是Setup的js编写模式真香。

少写N多前置代码和简单引入，唯一不足就是在webStrom 不能像2.0 有一个name 属性可以快捷import 模板。

针对3.0 更新后。使用新特性，改写事件的封装模式。

新增setup下的

侦听模式。
自动卸载侦听数据。

事件模式思想下面链接有简单介绍。

VUE事件模式_lazy_余的博客-CSDN博客开头前我先吐槽vue 2.0 是面向过程的思想极致产物1、在vue script 中不能使用继承对象。2、Data：数据层。中的循环嵌套多层数据，如果修改里面的值 vue 自称的数据动态改变是有问题的，当然解决方式多样。3、vue官网的js 分布是坑大头鬼的。言归正传：在vue 如果涉及2个页面的处理方式，大部分人都会直接想到官方推出来的，vuex 来响应二个没有任何交...https://blog.csdn.net/yu305306/article/details/86712777

旧版的事件侦听获取必须在模板里面记录各种回调信息。

在setep下有几种加载侦听方式。

一个在初始化时候就加载

一个在onMounted 加载

只能选其一进行加载处理，不然会重复事件抛出。

如果在初始化时候加载事件侦听，在侦听下直接进行事件抛出就可以获得数据。


const hookDispatcher = HookDispatcher();
hookDispatcher.addEvent(GroupEvent.DEMO_GET_EVENT, function (e) {
  console.log("获取数据")
  console.log(e)
})

hookDispatcher.dispatch(GroupEvent.DEMO_GET_EVENT,"我是你爹")

GroupDispatcher.dispatch(GroupEvent.DEMO_GET_EVENT,"说一句话啊")

打印出来

如果在onMounted加载事件侦听，只能等页面初始化完成才能获取数据。


const hookDispatcher = HookDispatcher();
hookDispatcher.addEvent(GroupEvent.DEMO_GET_EVENT, function (e) {
  console.log("获取数据")
  console.log(e)
})

onMounted(()=>{
  hookDispatcher.dispatch(GroupEvent.DEMO_GET_EVENT,"我是你爹 onMounted")

  GroupDispatcher.dispatch(GroupEvent.DEMO_GET_EVENT,"说一句话啊 onMounted")
})

打印出来