服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - Vue3这个API慎用!可能会有性能问题!

Vue3这个API慎用!可能会有性能问题!

2024-01-04 13:11前端之神 vue.js

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

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

背景

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

Vue3这个API慎用!可能会有性能问题!图片

谨慎使用!

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

其实我个人是很少用 watchEffect 的,因为我感觉:

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

可维护性较差

先来说第一点,我举个例子,假如我要监听 a、b、c,然后去执行很多逻辑,如果我是使用 watch,我一眼就能看到,依赖项是 a、b、c 这三个变量,后面接手代码的开发者,也能很明确看到执行这些逻辑的依赖项是什么

Vue3这个API慎用!可能会有性能问题!图片

但是如果你使用的是 watchEffect,那么你下次看代码时,你得去这么多逻辑中去自己一个一个找依赖项是什么,是不是感觉代码可维护性变得比较差了?

Vue3这个API慎用!可能会有性能问题!图片

性能问题?

再来说说 watchEffect 可能有性能问题,我们看以下例子

Vue3这个API慎用!可能会有性能问题!图片

其实 isEven 自始至终都是 true,所以应该只执行一次函数就行了,但是 watchEffect 没有做惰性处理,也就是只要 isEven.value 被重新赋值,函数就会重新执行一遍,无论 isEven 是否变了,这就会造成无意义的代码执行~

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


原文地址:https://mp.weixin.qq.com/s/8lwR-VS9sBnSnfeQxfM7zA

延伸 · 阅读

精彩推荐
  • vue.jsVue自定义v-has指令实现按钮权限判断

    Vue自定义v-has指令实现按钮权限判断

    这篇文章主要给大家介绍了关于Vue自定义v-has指令实现按钮权限判断的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    OrzR34682022-03-02
  • vue.js基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    这篇文章主要介绍了基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一...

    前端小白菜~5302021-12-27
  • vue.jsvue backtop组件的实现完整代码

    vue backtop组件的实现完整代码

    这篇文章主要介绍了vue backtop组件的实现完整代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    五那几诺火库洛,火库洛10832022-02-24
  • vue.jsVue中ref和$refs的介绍以及使用方法示例

    Vue中ref和$refs的介绍以及使用方法示例

    这篇文章主要给大家介绍了关于Vue中ref和$refs使用方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    @Demi3962021-12-30
  • vue.jsvue实现防抖的实例代码

    vue实现防抖的实例代码

    这篇文章主要给大家介绍了关于vue实现防抖的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    唐生洗发用飘柔11252021-12-30
  • vue.js一文搞定常考Vue-Router知识点

    一文搞定常考Vue-Router知识点

    Vue-router有两种路由模式,分别是hash模式和history模式,在路由配置中默认的是hash模式。,history模式的url中没有#,看起来也比hash模式更美观,本质是通过传...

    前端一码平川6422022-06-24
  • vue.jsvue登录页实现使用cookie记住7天密码功能的方法

    vue登录页实现使用cookie记住7天密码功能的方法

    这篇文章主要介绍了vue登录页实现使用cookie记住7天密码功能的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    水冗水孚8712022-01-20
  • vue.jsvue实现裁切图片同时实现放大、缩小、旋转功能

    vue实现裁切图片同时实现放大、缩小、旋转功能

    这篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    L6zt10932022-01-10