watchEffect是什么,和watch的关系?
watchEffect
为一种特殊的监视,它能立即执行一次函数,并响应式地追踪其监视对象,当对象改变后,重新执行一次函数。watch
和watchEffect
- 都能监视响应式数据的变化,但监视数据变化的方式不同
watch
需要明确指定监视对象watchEffect
不需要明确指出监视对象,在函数中使用了哪些对象,那么就监视哪些对象
- 怎么使用
watchEffect
?
<script lang="ts" setup name="sample">
import {watchEffect} from 'vue'
watchEffect(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([data1,data2],(newValue)=>{
let [newData1,newData2] = newValue
if(newData1 >= 5 || newData2 >= 10){
console.log("达到条件!")
}
})
watchEffect(()=>{
if(data1.value >= 5 || data2.value >= 10){
console.log("达到条件!")
}
})
</script>
- 由代码可见,
watchEffect
相较于watch
更加简易,在需要同时监视多个数据等条件下,使用watchEffect
更为快捷方便。