20231125 前端开发日报

[Vue3] 历数 ref 四宗罪，现在开始用 reactive；【Vue3】对el-form进行二次封装后，我的开发效率提升了3倍；Flutter 小技巧之 3.16 升级最坑 M3 默认适配技巧；极简原生js图形验证码；开源一个局域网文件共享工具；前端自动化UI测试的完整方案；一道面试题带你认透js类型转换（万字解析？）；【源码&库】Vue3模版解析后的AST转换为render函数的过程

1. [Vue3] 历数 ref 四宗罪，现在开始用 reactive

   又看到一个谈 ref 和 reactive 的文章，文章举了一堆似是而非的例子说明 reactive 不好。 作为一个坚定的 reactive 拥护者和使用者，我觉得是时候出来反驳几句了。

2. 【Vue3】对el-form进行二次封装后，我的开发效率提升了3倍

   本篇文章我们通过配置支持 jsx 的开发环境，实现了事件的批量绑定。和之前的写法十分类似，我们接收一个对象，并在组件内对对象进行一些处理，最终根据处理结果生成表单的子元素。该自定义组件支持 el-fo

3. Flutter 小技巧之 3.16 升级最坑 M3 默认适配技巧

   如果要说 Flutter 3.16 升级里是最坑的是什么？那我肯定要说是 Material 3 default （M3）。 倒不是说 M3 bug 多，也不是 M3 在 3.16 上使用起来多麻烦，

4. 极简原生js图形验证码

   前天接到需求要在老项目登陆界面加上验证码功能，因为是内部项目且无需短信验证环节，那就直接用原生js写一个简单的图形验证码。 示例： 实现过程为1.先写一个canvas标签做绘图容器。    →    

5. 开源一个局域网文件共享工具

   今天分享的内容是《开源一个局域网文件共享工具》。 不知道大家有没有这样的需求，我有多个设备，或者我想给别的同事传递文件，但是不想在互联网上传播，那怎么实现呢？shigen今天开源了我设计的一款工具

6. 前端自动化UI测试的完整方案

   开发公共平台项目，测试资源相对比较少，因此对开发者自身而言，为了维护项目的稳定性，需要对平台做各类测试，即使有测试环境，但是也很容易缺乏测试场景导致带着bug上线的情况。 因此我们需要做完整自动测试。

7. 一道面试题带你认透js类型转换（万字解析？）

   面试官：下面输出结果是什么，并解释其原因 答案我放在文章末尾了，为了给大家弄懂答案的意思，我还是老套路，先给大家过一遍类型转换 类型转换就是不同的数据类型之间进行转换，数据类型我们就算es6之前也就只

8. 【源码&库】Vue3模版解析后的AST转换为render函数的过程

   上一章我们详细的分析了Vue3的模版解析过程，每种不同的节点都对应着不同的解析结果； 而这些解析结果只是一个AST对象，并不能直接用于渲染，所以我们需要将AST对象转换为render函数，而这个过程就

9. 【源码&库】Vue3的AST转换细节全解析

   紧接上一章的节奏，我们了解到了Vue3的AST转换的过程，整体来说就是将一段字符串进行解析，每一段字符串都对应着一个节点； 而每个节点都会有不同的类型，对应着不同的解析函数，今天我们就来深扒这些具体解

10. vue3+element-plus动态路由菜单

    文章浏览阅读167次，点赞2次，收藏2次。icon使用的是阿里巴巴图标库，需要下载在index.html全局引入。2、创建组件 SideMenu.vue。路由先存到store里面。创建routes.ts。

11. Vue3 响应式数据 reactive使用

    文章浏览阅读171次。vue中的reactive的使用

12. Node.js运行tsc生成的js文件时，提示Error [ERR_MODULE_NOT_FOUND]: Cannot find module ，Did you mean to import …

    文章浏览阅读330次，点赞8次，收藏5次。我使用Node.js(v18.17.1)运行tsc生成的js文件时，提示Error [ERR_MODULE_NOT_FOUND]: Cannot find module ，Did you mean to import …/.js?

13. Vue+ElementUi+springCloud文件手动上传校验文件格式大小并携带参数

    文章浏览阅读156次，点赞3次，收藏4次。【代码】Vue+ElementUi+springCloud文件手动上传校验文件格式大小并携带参数。

14. 【高德地图-JS】Vue中加载高德地图报INVALID_USER_SCODE错误

    文章浏览阅读163次，点赞2次，收藏5次。【代码】【高德地图-JS】报INVALID_USER_SCODE错误。

15. Vue3中el-table表格数据不显示

    文章浏览阅读431次。检查 scoped-slot 是否正确使用：如果使用了 scoped-slot，确认作用域插槽中的绑定名是否正确，如 v-slot="{ scope }" 中的 scope 是否与 column 属性中的 scopedSlot 名称一致。检查 el-table 组件的 load 方法是否正确使用：如果使用了 load 方法，确认 load 方法是否正确实现，如返回的数据是否为数组，是否包含必要的属性等。检查数据格式是否正确：确认数据是否传入了正确的格式，如数据是否为数组，每条数据是否包含必要的属性等。

16. vue实例挂载的过程

    文章浏览阅读521次，点赞17次，收藏16次。vue实例挂载的过程

17. Vue中的$nextTick的作用

    文章浏览阅读137次。然而，有时候我们需要在 DOM 更新后执行一些操作，比如访问更新后的 DOM 元素、对元素进行计算、调用原生 API 等，这时候就需要使用 $nextTick 方法。$nextTick 方法可以在 Vue 实例中使用，也可以在组件中使用。$nextTick是Vue提供的一个异步方法，在多次数据变化后，DOM更新需要一点时间，而vue异步更新DOM，故需要$nextTick来保证更新后的DOM操作都完成。作用是在数据更新后立即执行回调函数，确保更新后的DOM操作都完成，控制台输出“DOM 更新完成！

18. vue中watch的使用详解

    文章浏览阅读174次，点赞3次，收藏4次。vue中watch的使用详解

19. vue3还用this吗？getCurrentInstance获取当前组件实例

    文章浏览阅读251次，点赞6次，收藏5次。在Vue3中，我们发现this是undefined，那我们真的没法使用this了吗？vu3给我们提供了一个getCurrentInstance函数： 用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。

20. vue每个阶段的生命周期做了什么

    文章浏览阅读68次。Vue 实例的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。

21. 【React】useReducer

    文章浏览阅读60次。让 React 管理多个。

22. Vue侦听器

    文章浏览阅读123次。Vue侦听器是根据组件状态做DOM更新或者异步更新其他级联状态的。计算属性的主要目标是根据已有数据计算出组件的状态，它是组件内部的计算，计算结果在组件内部应用。侦听器的主要目标是根据组件状态的变动，做级联的或者异步的操作或DOM更新，操作的影响范围比计算属性大得多。侦听器默认情况下是懒执行、浅层侦听、在Vue组件更新之前被调用的。

23. 在Vue中获取手机定位信息

    文章浏览阅读128次，点赞4次，收藏3次。在Vue中获取手机定位信息，可以使用Geolocation API来实现。

24. 前端技术探秘-Nodejs的CommonJS规范实现原理 | 京东物流技术团队

25. Promise规范与原理解析 | 京东物流技术团队

26. 纯CSS动态渐变文本特效