watch和watchEffect之间的小关系

在vue3中，有watch和watchEffect是用于监听数据的两种方式，本次主要讲解两者的区别

一、watch属性

1.参数

watch包含三个参数：

1).监听的属性

2).回调函数

在回调函数中又包含两个参数oldValue和newValue，分别是修改前的数据和修改后的数据

3).是一个对象，其中包含以下属性(截图于vue官网，其中较为常用的为前两条)

2.写法

watch(监听的属性，()=>{},{})

3.注意

1).watch监听多个属性时用数组的方式

2).watch监听的属性为ref类型可直接写，若是reactive则需要用函数的返回值

3).watch监听reactive时需要加deep属性以进入深度监听才可

4).watch默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

二、watchEffect

1.参数

watchEffect包含两个参数：

1).回调函数

2).可选属性(主要功能为调整副作用的刷新时机或调试副作用的依赖)

2.写法

watchEffect(()=>{})

3.注意

1).watchEffect是监听页面的所有响应式数据，且开始就会理解实行监听

2).watchEffect可监听rective和ref

三、总结

通过看以上的第三点就可以看出两者的区别了

简单的解释watch就是一个摆烂的人，你让我监听某个元素时，才会取监听，因此称为懒侦听；

watchEffect是一个内卷的人，只要是响应元素，我就监听

以上便是本次的讲解了，如有问题可评论