研究vue2.0源码(3)eventsMixin——core

224 阅读3分钟

eventsMixin

也是感觉到一丝丝的疲惫😫,这两天学习的东西太多了,本来讲道理工作任务少应该可以更轻松,但是我现在只有匹配,首先是对于技术广度方面要学习react,写点小demo,然后是对工作技术方面的掌握还要看taro(现在我待的小公司。。。。emmmm其实也不算小,只是因为公司重心在线下实体方向,对于技术部只是支持,也就是二十来人,然后现在主要还在迭代、开发的有一个web项目,一个微信公众号,一个微信小程序,一个套了层壳子的weex,weex这个项目可能会遗弃),最重要的是我对于个人软实力这方面不满意,想要继续读研,maybe international MBA,maybe 自主招生的研究生,这段时间了解了各个考研的优缺点,就开始准备考研的英语。。。。实累。。。。。

image.png

话不多说!今天是简单粗暴的讲解vue源码,开门见山,我们来讲讲eventsMixin,咱们在说这个的时候各位看官请自行联想,在vue开发的时候是怎么去添加事件和调用事件的

这个模块首先来谈一谈组件通信

无聊的知识点1⃣️

$on

首先是vue实例上的$on实例方法,接收两个参数,第一个参数的类型可以是字符串,也可以是数组!!! 惊呆老陈十多年,这些隐形的使用方式我都没有了解过,各位看官学到了吧,第二个参数接收的一个方法,结合代码我们来看看第一个参数传入数组有什么好处

image.png

看到代码了吧,第一个参数传一个数组进来可以实现多个事件绑定一个方法

image.png

$off

针对挂载事件推出的卸载事件方法,但是发现了一个有趣的事情,就是一个event对应一个或多个function方法,咱们也就看到了$on上有一句代码是上面忽略掉的,或者说我没有相对应的重视 (vm._events[event] || (vm._events[event] = [])).push(fn) 这啥???就是在vm._events这个对象中保存的是键值对,这个值是一个数组,还可以继续在这个event事件上进行添加方法,牛皮!!!

image.png

$once

为什么会先讲 off呢,是因为off呢,是因为once中会用到:)$once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除。

image.png

$emit

往往最好的食材采用最简单的烹饪方式,往往最重要的事情采用最简单易懂的方式,这都是一个道理,$emit就是调用一哈就完了,over了!完结撒花

image.png

image.png

扩展知识

无聊的知识点1⃣️

组件通信我会讲vue2.0,vue3.0还有react中的实现过程

1、首先是vue2.0总结一下

  • 可以使用props从父组件向子组件传参,第一个图是在父组件中引入子组件,然后在组件标签内写属性,重点哈!!! 在子组件中一定要用props属性声明!不然这个就会保存在vue.prototype.$attrs中,在子组件中也就是声明props:['custom']就可以使用了

image.png

image.png

  • 第二种方式是使用vuex状态管理工具(这些都不是本节内容,具体的使用方式我留着以后来补全吧)
  • 第三种就是子组件传父组件使用$emit进行传递
  • 第四种是使用本地缓存localStorage
  • 第五种是使用页面的内存缓存seesionStorage
  • 第六种是使用注入属性provide和inject
  • 第七种就是全局bus事件总线
  • 作用域插槽也算一种,从子组件传递到父组件

2、聊聊vue3.0版本,相对于vue2.0版本进行比较

  • 首先props的使用保留下来了
  • vuex状态管理工具保留
  • 相对于vue2.0的emit使用上有区别,原来的emit使用上有区别,原来的emit是在this实例上的实例方法,在vue3.0中$emit是保存在setup接收的第二个参数context中的一个属性方法,需要在实例上进行声明,类似props
  • 本地缓存可以使用
  • 内存缓存可以使用
  • provide和inject可以使用
  • 全局bus需要借助插件实现,我使用的是mitt
  • 作用域插槽还存在

3、最后的最后是react

  • props是可以用的,在react中函数组件用接收参数的方式接收props,类式组件的props是在constructor中的参数,也可以在this上拿到props
  • redux是在react中的状态管理工具
  • 缓存属于浏览器,每个框架都可以使用