Vue3：watchEffect

watchEffect是什么，和watch的关系？

• watchEffect为一种特殊的监视，它能立即执行一次函数，并响应式地追踪其监视对象，当对象改变后，重新执行一次函数。
• watch和watchEffect
  1. 都能监视响应式数据的变化，但监视数据变化的方式不同
  2. watch需要明确指定监视对象
  3. watchEffect不需要明确指出监视对象，在函数中使用了哪些对象，那么就监视哪些对象
• 怎么使用watchEffect?

<script lang="ts" setup name="sample">
	import {watchEffect} from 'vue' // 引入watchEffect
	watchEffect(function) //function 为执行函数
</script>

• 代码实例：

<template>
    <div>
        <h1>数据1: {{ data1 }}</h1>
        <h1>数据2: {{ data2 }}</h1>
        <button @click="changeData1">改变数据一</button>
        <button @click="changeData2">改变数据二</button>
    </div>
</template>

<script lang="ts" setup name="sample">
    import {ref,toValue,watch,watchEffect} from 'vue'

    //数据
    let data1 = ref(1) 
    let data2 = ref(1)

    //方法
    function changeData1(){
        data1.value += 1
    }
    function changeData2(){
        data2.value += 1
    }

    //实现同一种监视功能
    // watch 方法
    watch([data1,data2],(newValue)=>{
        let [newData1,newData2] = newValue
        if(newData1 >= 5 || newData2 >= 10){
            console.log("达到条件！")
        }
    })

    //watch Effect方法 
    watchEffect(()=>{
        if(data1.value >= 5 || data2.value >= 10){
            console.log("达到条件！")
        }
    })
</script>

• 由代码可见，watchEffect相较于watch更加简易，在需要同时监视多个数据等条件下，使用watchEffect更为快捷方便。