最新版vue3+TypeScript开发入门到实战教程之watch与watchEffect对比区别

1、概述

上节: 详解watch用法，watch功能是监视某些数据的变化，一旦发生变化，调用回调，传递新旧数值。watchEffect官方定义如下：
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

简言之，watchEffect是一个函数，只需向 watchEffect 传递一个函数即可。在这个函数内部，你引用的任何响应式数据都会被自动监视其变化。

以下通过两个实例对比watch与watchEffect区别

2、watch事例

• 创建Fish组件，引入ref、watch

• 创建鱼类价格与重量

• 调用watch

• 当价格大于15且重量大于5，就能赚到钱了

运行效果如下图，watch通过数组的方式监视price与weight变化，由于我们不关注旧值的数据，参数只有newValue。当点击按钮超过对应值时，打印赚到钱了。

3、watchEffect事例

• 创建Fish组件，引入ref、watchEffect

• 创建鱼类价格与重量

• 调用watchEffect

• 当价格大于15且重量大于5，就能赚到钱了

运行效果如下图，watchEffect会自动监视price与weight变化，并在页面加载成功时，就调用一次watchEffect。后边当点击修改价格、修改重量按钮时，watchEffect都会被调用。

4、对比watch与watchEffect区别

• 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
• watch：要明确指出监视的数据
• watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）