20240124 前端开发日报

前端面试必考题：介绍项目和项目难点；发布 Vue3 让尤雨溪吃尽苦头：犯了3个错，每一个都需开发者警惕；Vue.js 3 项目开发：迈向现代化前端开发的必经之路；074：vue+mapbox 加载here地图（影像瓦片图 v2版）；Vue 3 + Ts 钩子函数（hooks）的用法，以＜script setup lang=“ts“/＞语法糖形式 #reactive #ref；点击页面元素打开IDE源码的开源提效工具——支持webpack/vite/rspack/react/vue/SSR等众多场景；React和Vue的生态系统有何不同？；React全家桶 – 【Redux】 – 环境准备、使用步骤、提交action传参、异步状态操作

1. 前端面试必考题：介绍项目和项目难点

   前端面试，以及任何技术岗位的面试，都离不开项目，这是必考题。简历中要写项目，面试时要聊项目。 基础知识、八股文、原理源码等这些，都是可以通过学习甚至背诵来补齐的。但项目不行，你再努力也弥补不了

2. 发布 Vue3 让尤雨溪吃尽苦头：犯了3个错，每一个都需开发者警惕

   作者 | Loraine Lawson译者 | 许学文策划 | 丁晓昀Vue 3 的发布让其创始人尤雨溪吃了不少苦头，也让他知道，未来再处理框架升级时需要在策略上做出重大改变。 在 2023 年 Vu

3. Vue.js 3 项目开发：迈向现代化前端开发的必经之路

   文章浏览阅读1.3k次，点赞93次，收藏84次。Vue.js是一种用于构建用户界面的渐进式框架。它的核心库专注于视图层，易于与其他库或现有项目集成。Vue.js 3是Vue.js的最新稳定版本，它带来了许多新特性和性能优化，使得开发者能够更高效地构建前端应用。Vue.js 3对自定义指令API进行了改进，使其更加一致和易用。这使得开发者能够更方便地创建和使用自定义指令，从而提高项目的可扩展性。本书是一本实用性很强的Vue.js 3实战项目书。书中结合实际项目场景，构建了一个完整的企业级应用。

4. 074：vue+mapbox 加载here地图（影像瓦片图 v2版）

   文章浏览阅读294次，点赞55次，收藏46次。本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图 v2软件版本。

5. Vue 3 + Ts 钩子函数（hooks）的用法，以＜script setup lang=“ts“/＞语法糖形式 #reactive #ref

   文章浏览阅读125次，点赞4次，收藏5次。Vue 3 + Ts 钩子函数（hooks）的用法，以语法糖形式 #reactive #ref

6. 点击页面元素打开IDE源码的开源提效工具——支持webpack/vite/rspack/react/vue/SSR等众多场景

   code-inspector-plugin 插件点击页面元素，就能自动跳转 vscode 对应的源代码位置。支持 webpack/vite/rspack/vue/react/solid/preact等

7. React和Vue的生态系统有何不同？

   文章浏览阅读127次，点赞4次，收藏3次。React和Vue是目前最受欢迎的前端框架之一，它们都拥有庞大而活跃的社区生态系统。

8. React全家桶 – 【Redux】 – 环境准备、使用步骤、提交action传参、异步状态操作

   一、环境准备 1.1 安装插件 在 React 中使用 Redux，官方要求安装两个插件 Redux Toolkit 和 react-redux； Redux Toolkit：（RTK） 官方推荐编写

9. vue echarts地图

   文章浏览阅读517次，点赞3次，收藏8次。范围选择器右侧行政区划范围中输入需要选择的省份或地市，选择自己想要的数据格式，这里选择了geojson格式，点右侧的蓝色按钮复制到浏览器地址栏中，打开的geojson文件内容右键另存为json文件即可。

10. 使用Electron打包vue文件变成exe应用程序

    文章浏览阅读310次，点赞7次，收藏6次。然后在Electron 项目中执行npm run package，进行打包exe，打完包之后在根目录下的release的文件夹中有打包好的exe文件。修改生产环境配置，配置为后端得地址，http://127.0.0.1:8080/ 避免避免Electron打包exe后接口调用不通得问题。修改跳转到其他页面空白得问题，路由跳转得问题，把history修改成hash。打包后得路径修改成为./，避免Electron打包exe后显示空白。把vue项目打成dist的包，放到Electron项目的根目录下。

11. VUE+Vis.js鼠标悬浮title提前显示BUG解决方法

    文章浏览阅读165次，点赞3次，收藏2次。将作为悬浮窗的元素放进去，因为v-show只是隐藏元素，元素还在页面内，而作为悬浮窗的元素通过this.$refs只会获取当前元素，当元素被拿去作为悬浮窗，是可以正常显示的。在使用VUE+Vis.js做拓扑图，利用鼠标悬浮放在图标展示设备信息时，发现鼠标一放在图标上面时，标题表会提前在放置的元素下显示，鼠标再放到图标上去元素才会隐藏变成悬浮状态。添加一个div元素，设置。

12. ant design vue中的全局提示(message)在js、ts中使用

    文章浏览阅读126次，点赞5次，收藏5次。antd for vue message在任意处使用

13. Vue 中如何模块化使用 Vuex

    文章浏览阅读112次，点赞3次，收藏4次。在个人小项目当中，不使用模块化没什么问题，但是在公司或者大型项目下就需要使用模块化管理，使用模块化有利于。在需要访问或修改状态的组件中，你可以使用Vuex提供的辅助函数。假设你有两个模块，一个用于管理用户信息，另一个用于管理商品信息。

14. vue+ts大文件切片上传

    文章浏览阅读722次，点赞13次，收藏17次。别看文字了，看代码注释吧§(*￣▽￣*)§。

15. Vue nextTick使用场景及实现原理

    文章浏览阅读290次，点赞11次，收藏5次。nextTick是前端面试中vue框架中必考的部分，一定要掌握。它主要是处理我们再变更完数据以后，无法立刻拿到最新的DOM节点对象的问题。我们可以这样理解：vue执行完渲染后会执行this.nextTick()里面的callback函数。

16. Vue中$watch()方法和watch属性的区别

    文章浏览阅读286次，点赞6次，收藏3次。属性都是用于观察和响应数据变化的机制，但它们的用法、性能和适用场景有所不同。根据具体的需求和场景选择合适的方法来使用。属性都可以用来观察和响应Vue实例上的数据变化，但它们之间存在一些关键的区别。发生变化时，会触发相应的处理函数并打印出新的消息值。发生变化时，会触发回调函数并打印出新的消息值。属性中直接定义了处理函数，并在组件的。选项中定义了需要监听的数据属性。在上述示例中，我们使用。在上述示例中，我们使用。以下是在Vue中使用。生命周期钩子中添加了。

17. 对Vue有状态组件和无状态组件的理解及使用场景

    文章浏览阅读314次，点赞8次，收藏8次。有状态组件适用于需要保存和管理自己的状态，处理复杂交互逻辑的场景；无状态组件适用于静态展示数据、无需处理交互的简单展示型组件。在实际开发中，根据具体需求和组件的功能，可以灵活选择使用有状态组件或无状态组件。

18. Vue关于Vuex实现组件中数据的共享要点总结和部分代码

    文章浏览阅读285次，点赞10次，收藏5次。/Vuex和pinia一样都是把相应的数据和逻辑代码集中在一个js文件，然后import { mapState, mapGetters, mapMutations, mapActions } from ‘vuex’，和pinia的区别就是Vuex这里可以看到他多了mapGetters和mapMutations，mapState和mapGetters在对应vue的computed里面， mapMutations和 mapActions在methods里面。namespaced: true, //命名空间。

19. 在vue中不同组件通信方式

    文章浏览阅读154次。在vue中不同组件通信方式