Vue3：watchEffect监视数据

一、情景说明

在前面，我们已经学习了Vue3中用watch函数来监视数据。
其中，监视多个数据时，我们将他们组装在一个数组里，即可同时监视多个属性的变化。

那么，问题来了，如果，一个组件里，我们有几十个变量需要监视，怎么做了？
难道写成一个超长数组，然后，去监视这个数组吗？

显然，这个方案不是最佳方案。
这一篇，我们就用watchEffect来解决这个问题。

二、案例

引入函数

  import {ref,watch,watchEffect} from 'vue'
1

创建变量

  let temp = ref(10)
  let height = ref(0)
1
2

watch方式监视变量

 watch([temp,height],(value)=>{
      // 从value中获取最新的水温(newTemp)、最新的水位(newHeight)
      let [newTemp,newHeight] = value
      // 逻辑
      if(newTemp >= 60 || newHeight >= 80){
        console.log('给服务器发请求')
      }
    }) 
1
2
3
4
5
6
7
8

watchEffect方式监视变量
会发现，我们不用构建数组，watchEffect内含有什么变量，它变化了，watchEffect自动被触发！

    watchEffect(()=>{
    	//这种写法会因为 || 运算符，导致height监听失效，所以，要分开用if判断
        // if(temp.value >= 60 || height.value >= 80){
        //     console.log('给服务器发请求')
        // }
        if(temp.value >= 60){
            console.log('温度超标，给服务器发请求')
        }
        if(height.value >= 80){
            console.log('水位超标，给服务器发请求')
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12

三、对比

watch对比watchEffect

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