Vue3这个API慎用！

最新推荐文章于 2025-05-19 20:38:29 发布
最新推荐文章于 2025-05-19 20:38:29 发布
阅读量163 收藏 1
点赞数 5
文章标签： vue.js
可转载
本文链接：https://blog.youkuaiyun.com/qq_45532769/article/details/144978364
版权

提示：记录工作中遇到的需求及解决办法

文章目录

背景

Vue3 有一个 API，可能很多人都用过，那就是 watchEffect，他的功能跟 watch 有点类似，但又有些不一样，用法如下，它会去自动收集依赖的响应式数据，响应式数据一变，就会触发函数的重新执行

在这里插入图片描述

谨慎使用！

我发现组员们很喜欢用 watchEffect ，他们的意思是 watchEffect 比较方便，写起来比较爽

其实我个人是很少用 watchEffect 的，因为我感觉：

  • watchEffect 的依赖不够明确
  • watchEffect 可能有性能问题

可维护性较差

先来说第一点，我举个例子，假如我要监听 a、b、c，然后去执行很多逻辑，如果我是使用 watch，我一眼就能看到，依赖项是 a、b、c 这三个变量，后面接手代码的开发者，也能很明确看到执行这些逻辑的依赖项是什么
在这里插入图片描述
但是如果你使用的是 watchEffect，那么你下次看代码时，你得去这么多逻辑中去自己一个一个找依赖项是什么，是不是感觉代码可维护性变得比较差了？
在这里插入图片描述

性能问题？

再来说说 watchEffect 可能有性能问题，我们看以下例子
在这里插入图片描述
其实 isEven 自始至终都是 true，所以应该只执行一次函数就行了，但是 watchEffect 没有做惰性处理，也就是只要 isEven.value 被重新赋值，函数就会重新执行一遍，无论 isEven 是否变了，这就会造成无意义的代码执行~

但是如果是用 watch 就不会有这种情况发生

在这里插入图片描述

一篇文章弄懂vue3常用API
蛋蛋老公的博客
12-31 5718
1、使用vite创建项目 npm init @vitejs/app vue3-vite-demo 2、建立路由router 打开文件，建立router路由文件，建立index.js文件 import { createRouter, createWebHashHistory } from "vue-router"; import globalRoutes from "./globalRoutes"; import mainRoutes from "./mainRoutes"; const router
vue3新特性及api介绍（三）
weixin_42733155的博客
05-10 1619
继续之前的内容 二、vue3新特性 14.customRef customRef创建一个自定义依赖项和跟踪触发的ref属性，也就是说，我们可以控制这个属性何时触发对应的监听。要求返回一带有get和set方法的对象。比如这样，我们修改之后延迟2s触发对应的更新。 function useDebouncedRef(value, delay = 2000) { let timeout; return customRef((track, trigger) => {
在vue中不要滥用watch
jnfy的博客
09-03 1132
在vue中不要滥用watch
了解Vue2全局API这一篇就够了
dorabighead的博客
02-05 1569
过滤器是一个函数，接受输入参数并返回处理后的结果。过滤器函数的第一个参数是要处理的值，后面可以跟上其他参数。
慎用！3个容易被打的Python恶搞脚本！
公众号：Python研究者
11-07 253
Python 无限恶搞朋友电脑，别提有多爽了，哈哈，打造自己的壁纸修改器，电脑无限锁屏， 无限弹窗，都在这里！！！1、修改电脑桌面壁纸工具使用开发环境：python3.7， Windows10使用工具包：win32api，win32con, win32gui, os, randomwin32的工具下载命令：pip install pywin32项目解析思路桌面数据信息是保存在注册表上的内容，数据保...
Vue3开发时实用的几个库
qq_37698249的博客
04-06 1644
一、API 自动导入 setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。 // 安装命令 npm i unplugin-auto-import -D --save // 配置vite.config.js imp.
vue的回调函数慎用this
viviliving的专栏
09-02 229
new Vue({ data: { cities: [...] }, methods: { my_http_request: function(){ let that = this axios.get('http://mysite.com/my_api.do') .then(function(response){ // 这里不能使用 this.cities 来赋值 that.cities = response.data.result .
我的项目用Vue3了，真香！
weixin_46837985的博客
05-26 882
来源：代码与野兽https://juejin.cn/post/6950487211368251399背景近期在研发一套物联网设备管理系统，其主要用途是将公司旗下所负责智能园区中的硬件设备通...
多角度分析Vue3 nextTick() 函数
念旧的博客
04-16 995
nextTick()是 Vue 3 中的一个核心函数，它的作用是延迟执行某些操作，直到下一次 DOM 更新循环结束之后再执行。这个函数常用于在 Vue 更新 DOM 后立即获取更新后的 DOM 状态，或者在组件渲染完成后执行某些操作。
Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」
蒋川@卡拉云
05-27 2308
Vue3 的源码使用 TypeScript 全部重构，而 TypeScript 是 JS 的一个超集，主要提供对 ES6 的支持以及更棒的代码可读性和高维护性。可以说 Vue3 Typescript 已经成为开发标配。本文带领大家从搭建环境开始，手把手带领大家用 Vue3 Typescript + element-plus 开发一个极简「待办清单」app，在实战中学习 Vue3 TypeScript。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云 ，卡拉云是新一代低代码开发工具，可一键接入常
Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！
o__cc的博客
09-07 5045
内容源于：https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For React 完整接入详解 脑图 公众号：黑客下午茶 快速开始 S...
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
m0_61486963的博客
09-12 3213
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
Vue:显示数据
2301_82101106的博客
05-14 292
v-text和v-html。它们都能将数据渲染到页面上，但处理方式有本质区别。通过代码示例理解它们的特性和使用场景。v-text。
VUE篇之自定义组件使用v-model
ae_pppppp的博客
05-15 253
该代码展示了如何在Vue.js中使用子组件和父组件进行双向数据绑定。子组件MyComponent包含一个时间选择器el-time-select，并通过v-model与父组件进行数据同步。子组件通过props接收父组件传递的value，并在内部创建副本innerValue以避免直接修改props。子组件通过watch监听value的变化，并在时间选择器值改变时触发input事件，更新父组件的formData。父组件通过v-model绑定formData，并实时显示当前选择的时间。这种方式实现了父子组件之间的数
Vue3——Watch侦听器
m0_74386799的博客
05-15 418
watch是⼀个⽤于观察和响应Vue响应式系统中数据变化的⽅法。它允许你指定⼀个数据源（可以是 响应式引⽤、计算属性、组件的属性等），当这个数据源的值发⽣变化时，你可以执⾏⼀些响应的副作 ⽤（side effects）。watch可以⽤来监听任何响应式数据的变化。手动指定监听对象。
javascript和vue的不同
xiaogaotongxue__的博客
05-16 632
基于 Object.defineProperty ()（Vue 2）或 Proxy（Vue 3）：Vue 自动追踪数据变化并更新 DOM。手动操作 DOM：通过document.querySelector()等方法获取 DOM 元素，然后直接修改其属性或内容。虚拟 DOM（Virtual DOM）：Vue 通过虚拟 DOM diff 算法高效更新真实 DOM，开发者无需手动操作。：数据和 DOM 自动同步，开发者只需关注数据的变化。：数据和 DOM 是分离的，需要手动维护两者的同步。
uniapp中的easycom工作机制
Bruce__taotao的博客
05-18 864
uni-app 中的 easycom 是一种自动组件注册机制，能够简化组件的使用流程，提升开发效率。通过 easycom，开发者无需在页面中手动引入和注册组件，直接使用组件标签即可。其工作原理是通过自动扫描 components 目录下的 .vue 和 .nvue 文件，将组件名作为标签名进行注册。easycom 在编译阶段生效，支持自定义匹配规则。配置方式是在 pages.json 中设置 easycom 属性，启用自动扫描并定义规则。easycom 的优点包括减少样板代码、提升维护性、支持按需引入等，但
【Vue】路由2——编程式路由导航、 两个新的生命周期钩子 以及 路由守卫、路由器的两种工作模式
最新发布
2301_80636070的博客
05-19 824
t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7yihaohhh/我爱Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/37_src_%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA。
【JS】vue3中组件命名问题
Kevin_Gates的专栏
05-15 303
在 Vue 3 的单文件组件中，组件的命名风格在 JavaScript 和模板中有所不同。JavaScript 中通常使用 PascalCase
vue3项目刷新
04-16
<think>好的，用户的问题是关于在Vue3项目中实现页面刷新功能或解决刷新相关的问题。首先，我需要回忆一下Vue3中常见的页面刷新问题及其解决方案。根据提供的引用内容，问题主要集中在路由配置和服务器设置上，特别是在使用history模式时出现的404错误。 首先，我应该检查用户是否了解Vue Router的两种模式：hash和history。Hash模式在URL中带有#符号，而history模式则没有，更美观。但是，使用history模式时，服务器需要正确配置，否则刷新页面会导致404，因为服务器会尝试寻找实际不存在的路径。引用[2]和[3]提到了这一点，所以需要确保服务器配置正确，比如在Nginx中添加重定向规则到index.html。 然后，用户可能想要强制刷新当前页面，比如在数据更新后重新加载组件。这时候可以使用Vue Router的replace方法，或者通过重新加载当前路由来实现。另外，提供一个重新加载整个页面的方法，比如location.reload()，但这样会整个页面刷新，可能影响体验。 接下来，用户提到的白屏问题，引用[4]中提到在main.js中重新获取菜单数据并添加到路由中，这可能是在页面刷新时，Vue实例重新初始化，但路由可能没有正确加载动态添加的路由配置。所以需要在应用挂载前重新获取菜单数据，确保路由正确配置，避免白屏。 另外，公共路径的配置也很重要，比如设置publicPath和base，确保资源路径正确，避免404错误。引用[3]中的例子是针对Vue2的，但Vue3中配置方式类似，需要在vue.config.js和路由实例中设置正确的base路径。 最后，还需要考虑第三方插件或动态路由的问题。如果动态添加了路由，刷新时可能需要重新加载这些路由，否则会导致组件不存在。此外，缓存问题也可能导致页面内容未更新，可以通过添加时间戳或版本号来解决。 总结下来，解决方案应该包括路由模式配置、服务器设置、强制刷新组件的方法、处理动态路由和数据初始化，以及公共路径的配置。需要将这些点分步骤详细说明，确保用户能够一步步排查和解决问题。同时，生成的相关问题可以帮助用户进一步了解其他可能的优化和配置。</think>### Vue3项目页面刷新问题解决方案 在Vue3项目中，页面刷新问题通常与路由模式、动态路由加载和服务器配置相关。以下是具体实现方式和解决方案： --- #### 一、路由模式配置（重点解决404报错） 1. **默认Hash模式** 使用带`#`的URL格式，无需服务器额外配置： ```javascript // router/index.js import { createRouter, createWebHashHistory } from &#39;vue-router&#39;; const router = createRouter({ history: createWebHashHistory(), routes: [...] }); ``` 2. **History模式优化** 若需要无`#`的URL，需配合服务器配置： ```javascript const router = createRouter({ history: createWebHistory(&#39;/h5/&#39;), // 指定基础路径 routes: [...] }); ``` *服务器配置示例（Nginx）：* ```nginx location /h5/ { try_files $uri $uri/ /h5/index.html; } ``` --- #### 二、强制刷新当前页面 1. **组件级刷新** 通过`router.replace`实现无感刷新： ```javascript import { useRouter } from &#39;vue-router&#39;; const router = useRouter(); const reloadPage = () => { router.replace({ path: &#39;/redirect&#39; }).then(() => { router.replace(window.location.pathname); }); }; ``` 2. **全局刷新（慎用）** 直接调用浏览器API强制刷新： ```javascript window.location.reload(); ``` --- #### 三、解决白屏问题 1. **动态路由初始化** 在应用挂载前加载必要数据（参考引用[4]）： ```javascript // main.js const initApp = async () => { await store.dispatch(&#39;loadMenuData&#39;); // 加载动态路由所需数据 app.use(router).mount(&#39;#app&#39;); }; initApp(); ``` 2. **路由守卫处理** 在全局前置守卫中验证路由状态： ```javascript router.beforeEach((to, from, next) => { if (!store.state.routesLoaded) { await store.dispatch(&#39;loadDynamicRoutes&#39;); } next(); }); ``` --- #### 四、公共路径配置 1. **vue.config.js设置** 确保静态资源路径正确： ```javascript // vue.config.js module.exports = { publicPath: process.env.NODE_ENV === &#39;production&#39; ? &#39;/h5/&#39; : &#39;/&#39; }; ``` --- #### 五、常见问题排查 1. **服务器返回index.html** 所有未匹配请求都应返回入口文件 *Apache配置示例：* ```apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /h5/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /h5/index.html [L] </IfModule> ``` 2. **动态路由未加载** 检查是否在页面刷新时丢失动态添加的路由： ```javascript // 刷新时重新注册路由 if (window.performance.navigation.type === 1) { store.commit(&#39;resetRoutes&#39;); } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿超学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值