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

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

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

背景

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 就不会有这种情况发生


责任编辑:武晓燕 来源: 前端之神
相关推荐

2020-09-19 21:15:26

Composition

2023-06-14 08:34:18

Mybatis死锁框架

2021-12-16 08:27:54

Vue3 插件Vue应用

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-03-31 08:01:50

Vue3 Vue2 Vue3 Telepo

2024-03-01 11:32:22

Vue3APIVue.js

2024-02-01 09:10:04

页面引导工具Vue3

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2020-10-28 08:06:09

Vue3框架数据

2022-06-13 08:39:21

Vue3API

2021-07-29 12:05:18

Vue3Api前端

2022-07-13 10:07:31

vue3组件监听器

2022-08-26 10:01:48

Vue3TS

2021-09-08 22:29:46

Windows 11Windows微软

2021-12-02 05:50:35

Vue3 插件Vue应用

2024-03-19 08:35:30

Vue3添加水印维护版权标识

2021-06-01 07:40:59

Vue3更新技巧

2013-02-22 18:28:18

容错服务器、

2024-01-23 09:15:33

Vue3组件拖拽组件内容编辑
点赞
收藏

51CTO技术栈公众号