20231222 前端开发日报

前端之虎陈随易 2023 年终回顾与总结；Vue 2 即将停止更新；前端开发怎样开发一个自己的产品；卡顿减少 95% — 记一次React性能优化实践（性能篇）；一个小小的备忘录，让我熟悉了vue3全家桶；写 Vue 我建议非必要别用 watch；Flutter基建 – 12种隐式动画小组件全解析；elementUI + moment.js 日期选择器（年、月、日、周、季度）

1. 前端之虎陈随易 2023 年终回顾与总结

   前端之虎陈随易 2023 年终回顾与总结 本文参与掘金 2023 年度征文活动，请大家帮我随手点个支持，提升一下名次，谢谢~ 掘金 2023 年度人气创作者打榜中，快来帮我打榜吧～

2. Vue 2 即将停止更新

   随着2024年即将到来，我们借此机会提醒Vue社区，Vue 2将于2023年12月31日终止更新（EOL）。

3. 前端开发怎样开发一个自己的产品

   昨日入城市，归来泪满巾。 遍身罗绮者，不是养蚕人。 写了一辈子代码，没有一行代码的产权是属于自己的。更没有一个产品是属于自己的。每一个程序员都值得拥有，一个属于自己的产品。

4. 卡顿减少 95% — 记一次React性能优化实践（性能篇）

   什么？今天我被 Leader 拉进小黑屋了！“有很多用户吐槽咱的页面太卡了”，本文将从笔者近期参与的一个实际业务需求出发，总结性能优化思路，讲述我在 React 中后台场景下性能问题排查的心路历程

5. 一个小小的备忘录，让我熟悉了vue3全家桶

   vue3.js 实战–备忘录的实现 最近没有学到什么好的技术知识点分享，不过本次给大家带来一个实战，那就是使用 vue.js3 + ts 完成了一个小小的备忘录。虽然每个人的手机都自带有备忘录，但我

6. 写 Vue 我建议非必要别用 watch

   场景 代码大概如下，删除了很多无关内容。 本来只有 2 个 watch，今天新功能加了个关键词搜索，又得多 watch 一个 keyword.value。 于是这里变成了 3 个 watch，而且里面

7. Flutter基建 – 12种隐式动画小组件全解析

   文章会围绕着ImplicitylyAnimatedWidget隐式动画组件来分析，通过代码+Gif的形式将12种常用的动画呈现出来.

8. elementUI + moment.js 日期选择器（年、月、日、周、季度）

   文章浏览阅读136次，点赞2次，收藏3次。elementUI + moment.js

9. 它山之石可以攻玉 — Vue3优化面面观

10. 手把手带你入门 Three.js Shader 系列（六）

11. nodejs+vue+ElementUi精品课程网站建设

    文章浏览阅读84次。执行“删除”操作，弹出是否确认删除提醒，再次确认后才执行删除操作。在本界面，管理员可填写课程标题、课程教学老师、课程教学（年月日-年月日）、课程用书，填写分类，上传课程缩略图，填写课程教学老师简介，填写课程简介，点击“上传”按钮，数据库添加相应记录，即可将课程上传至系统，并在系统前台显示。②点击“注册”按钮，跳转至“注册”页面，输入用户名、邮箱、密码、确认密码，选择身份（普通用户、系统管理员），用户名作为数据库中唯一主键，不可重复，点击“注册”按钮，数据库中需更新，添加新用户信息，并跳转至“登录”页面。

12. vue实现excel上传并显示数据

    文章浏览阅读316次，点赞10次，收藏7次。在vue中实现excel上传并显示数据

13. 【vue】前端页面点击按钮弹窗播放m3u8格式视频

    文章浏览阅读135次。vue通过dplayer实现点击按钮弹窗播放m3u8视频

14. vue3+element plus 表格自动跨列，方便快捷实现

    文章浏览阅读165次，点赞4次，收藏5次。vue3+element plus 表格自动跨列，方便快捷实现

15. 【NodeJs中CommonJs和es6的区别（实践版本）】

    文章浏览阅读299次，点赞10次，收藏6次。CommonJs是一种模块规范，起初被用于Nodejs的模块规范。ES6的出现为了解决前端Module规范使用js文件格式进行编码的时候，我们基于commonjs规范，node的版本需要保持在v13版本之下。如果使用ts文件格式进行编程，为了提高程序效率可以考虑将node版本升到v14及以上，方便使用es6模块语法，同时前后端保持一致，有利于全栈开发。。

16. react+ts父子组件传值

    文章浏览阅读124次，点赞3次，收藏2次。⑥并在子组件中实现点击事件调通过父组件传过来的事件传递参数。，如果只有一个参数也可以直接卸载函数的参数括号中。，如果只有一个参数也可以直接卸载函数的参数括号中。①在父组件中定义事件名称并赋予点击事件。另外如果想不点击直接发送参数的话可以在。③在子组件中定义属性的类型。④如果数据多需要解构再使用。④如果数据多需要解构再使用。⑤在子组件中定义点击事件并。②在父组件中实现点击事件。③在子组件中定义事件类型。②从父组件传递给子组件。

17. 写了这么久的vue，Vue中组件和插件有什么区别？

    文章浏览阅读212次。调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现。提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。方法，第一个参数为组件的名称，第二个参数为传入的配置项。

18. vue-pure-admin源码解读与使用

    文章浏览阅读104次，点赞2次，收藏3次。热门项目vue-pure-admin源码解析

19. VUE框架引入Vue3与Vue3和Vue2在main.js里的区别——VUE框架

    文章浏览阅读307次，点赞13次，收藏7次。VUE框架引入Vue3与Vue3和Vue2在main.js里的区别——VUE框架

20. 什么是React的协调过程？

    文章浏览阅读167次，点赞4次，收藏4次。React的协调过程是指React在进行组件更新时，通过比较新旧虚拟DOM树的差异，找出需要更新的部分，并将这些差异应用到实际的DOM上的过程。在协调过程中，React会比较新旧虚拟DOM树的差异，找出需要更新的部分，并将这些差异应用到实际的DOM上。通过比较新旧虚拟DOM树的差异，React可以找出需要更新的部分，并将这些差异应用到实际的DOM上，从而提高了性能和效率。在commit阶段结束后，React会通知组件更新完成，并进行下一轮的协调过程，以响应可能的新的状态变化。如果有任何疑问，欢迎继续探讨。

21. Vue3+Vite+TS解决调用组件实例有类型推断

    文章浏览阅读144次，点赞4次，收藏3次。Vue3+Vite+TS解决调用组件实例有代码提示

22. vue的自定义指令注册使用

    文章浏览阅读238次，点赞6次，收藏4次。是在main.js中注册的指令在任何组件内都可以使用，指令在使用时不论是全局还是局部注册的，写成v-指令名。mounted（）时组件生命周期的挂载后阶段，此阶段可获得渲染后的dom元素。页面一上来就获取焦点，需要借助生命周期mounted，在不使用指令的情况下。指令是directives声明的 ，其中el就是指令所在的dom元素。要先用ref和$refs获取到dom元素，在执行下面代码。在main.js中注册，例如，焦点，字体大小，背景色等。是在某个组件内注册的指令，只能在这个组件内使用。

23. [ Vue3 ] 组合式API + Setup语法糖 如何获取组件实例？

    文章浏览阅读161次，点赞5次，收藏2次。在 Vue2 中，我们可以给组件设置 ref 属性后，就可以直接通过：this.$refs.HelloRef 来获取组件实例中所有的属性和方法。在 Vue3 中，如果采用了组合式API，它是没有 this 的，所以写法与 Vue2 略有不同。我们可以这么做来获取组件中我们想要的数据。首先老规矩，在 App.vue 中通过给 Hello.vue 子组件设置 ref 属性来获取子组件向父组件暴露的属性和方法。在 Hello 组件中，通过 defineExpose 将需要暴露给父组件的属性和方法导出。

24. react当中生命周期（旧生命周期详解）

    文章浏览阅读426次，点赞14次，收藏7次。生命周期（Lifecycle）指的是软件或程序在运行过程中经历的不同阶段和状态变化。在编程领域中，特别是在面向对象编程中，生命周期是指对象从创建到销毁的整个过程中所经历的状态变化。生命周期通常由一系列的方法或事件组成，用于在对象的不同阶段执行相应的操作或处理。每个阶段可以对应于不同的状态，例如初始化、运行、暂停、恢复以及销毁等。在前端Web开发中，生命周期常常用于描述JavaScript框架或库中的组件或页面的状态变化。

25. Vue组件间的通信方式整理

    文章浏览阅读141次，点赞4次，收藏2次。Vue提供了多种组件间通信的方式,我们可以根据实际场景,选择最适合的方式来使用。熟练掌握这些通信方式,能大大提高我们的开发效率。