Watch和WatchEffect的区别

Watch和WatchEffect的区别

watch和watchEffect在Vue 3中都是用于处理响应式数据的变动，但它们之间存在一些关键区别。
1、初始化执行
2、指定监听的数据
3、获取数据变化前后的值
4、适用场景

一、初始化执行

初始化执行时机。

watchEffect在组件初始化时会立即执行一次，用来收集依赖。

而watch则是惰性执行的，只有在被监听的数据发生变化时才会执行。

如果设置了immediate:true，则watch在页面首次加载时就会执行。

<script setup>
import {ref, watch, watchEffect} from "vue";

let firstName = ref('')
let endName = ref('')
let fullName = ref('')

watch([firstName,endName,fullName],(newName,oldName)=>{
    console.log('watch方法执行')
    // console.log(newName,oldName)
    fullName.value=firstName.value+endName.value
    console.log(newName,oldName)
})

watchEffect(()=>{
    console.log('watchEffect方法执行')
    console.log(firstName.value)
    console.log(endName.value)
    fullName.value=firstName.value+endName.value
    console.log(fullName.value)
})
</script>

<template>
  <main>
      姓:<input type="text" v-model="firstName">
      名:<input type="text" v-model="endName">
      姓名：<input type="text" v-model="fullName">
  </main>
</template>

执行结果：

watch方法添加immediate方法后的执行结果

二、指定监听的数据

watch需要手动指定要监听的数据和回调函数；
watch(监听的属性，回调函数(newVal,oldVal),{deep:true,immediate: true})

watch([firstName],(newName,oldName)=>{//方法中只指定要监听firstName属性，所以其他两个属性值监听不到
    console.log('watch方法执行')
    // console.log(newName,oldName)
    console.log(endName.value)
    console.log(newName,oldName)
},)

watchEffect则不需要显式地指定要监听的数据，它会自动追踪函数内部使用的响应式数据。

watchEffect(()=>{
    console.log('watchEffect方法执行')
    console.log(firstName.value)
    console.log(endName.value)
    fullName.value=firstName.value+endName.value
    console.log(fullName.value)
})
},)

输入：

执行结果：

三、获取数据变化前后的值

watch可以同时获取更改前后的值；

watchEffect则无法获取到更改前的值，它只能获取到变化后的值。

四、适用场景

watch适用于需要细粒度控制响应式数据变化的场景，比如需要手动停止监听或访问数据变化前后的值

watchEffect则更适合用于自动追踪响应式数据并触发副作用的场景，如执行异步操作或更新UI。