这是编写代码的过程中由于需求而感悟到的JS的一些技巧。与其说是技巧不如说是对JS有了更加深刻的理解了

B站是一个以视频为主的社交媒体平台，其中一大特色就是弹幕，即用户可以在视频上方实时发送评论，与其他观众互动。弹幕可以增加观看视频的乐趣，也可以反映出视频的热度和受欢迎程度。然而，弹幕也有一个缺点，就是可能会遮挡住视频中的重要内容，影响观看体验。为了解决这个问题，B站推出了一种智能防挡弹幕技术 ，可以让弹幕自动躲避人形区域，达到弹幕不挡人的效果。

随着Vue更新到3.x版本，出现了一个新的代码组织方式-组合式API。以前Vue2.x到代码书写风格是选项式 API。 具体可以去vue官网查看 但是在实际代码编写过程中，组合式API一大坨代码都放在一起。不利于后期代码维护，本人小菜鸟一枚就思考是否有什么设计模式或者什么解决的方法。一开始采用的就是普通的分函数这种，但是后面觉得维护起来也很麻烦，问了大佬之后总结出一部分经验。

更麻烦的是有些图标悬浮上去是要改变颜色的。这里我找到了一种让svg方便引入的方法，而且能像字体文件一样，简单的改变颜色和大小。

本文记录一下Vue3的一个基本的开发框架的搭建。主要在公司开发业务，主体框架不用每次都搭建。时间长了就容易忘记了，当初的框架如何搭建的。文章记录的框架搭建的主要实现功能如题，然后研究一些快捷的操作。例如，ts定义的空间自动导入等等。

随着移动端设备的普及，作为前端开发，难免会遇到图片双指放大的需求。触控设备可以直接使用手指进行交互，而且基本上都支持多点触控。所以，查阅了网上大佬的案例，编写一个vue指令，来完成双指放大图片的需求。

本篇记录vue3和vue2在实现相同的逻辑上的一些语法差异，持续更新。

在实际开发中，经常用到h方法来实现页面，常见的组件中也有render，h这种写法。例如iview的table中

前面主要是vue的源码仿写，最主要的是vue的响应式，以及依赖收集。是一个简易版本，和官方源码还是有很多细微差别的，例如数组代理之后改变数组长度，会触发更新之类的。数组还会被收集长度这种依赖关系，以及数组的一些splice，push，shift，unshift，pop这些方法重写，来完成修复一些数组在vue依赖更新中的BUG。

在页面编写中，之前都是使用reactive来包裹对象，这样对象属性的值改变，其对应的effect包裹渲染动作就会被触发。并且通常有函数解构的操作，例如let people = reactive({name:"张三",age:24}); let {name,age} = people;。如果这么结构操作的话，name和age就会变成普通的变量，那么如果在effect中使用的话，就算改变了值也不会触发回调函数。那么为了解决例如此类的需求，vue3提供了ref、toRef、toRefs。

本文学习编写watch功能函数。首先，先去使用下官方的watch做一些简单的小功能测试。

回顾上期的内容，编写了effect中的调度器，主要修改了effect.ts文件。在预览之前的代码的时候会发现一些优化的地方。 在vue代码的需求编辑中，会遇到这样一个例子。例如一个人的姓名分为姓和名，那么我希望在页面上打印出这个人的姓+名，而且在姓或者名改变的时候，页面渲染也会改变。那么就用到了vue的computed来进行操作。旧版的vue2中computed是基于watcher实现的。vue3则是基于effect来实现。另外vue3中的computed写法叫组合式API，而vue2是拿data中的属性来编写computed中的属性，这种叫选项式API(option)。具体的vue3写法如下