watch 跟 watchEffect的区别

<script lang="ts" setup name="Login">
import { ref, watch, watchEffect } from 'vue';
  //初始值为0
  const num = ref(0)
  //watch(参数1,参数2)
  //参数1: 值,函数,数组
  //watch(要监听的数据,回调(前后值){})
  //watch(依赖,回调)
  //如果这个值变了,则回调会执行  ==> 回调函数{依赖}这个数据
  //watch(num,() =>{console.log('watch',num.value)})

  //watchEffect(回调()=>{})
  //1.自动执行一次回调.这个过程中,收集依赖项
  //2.随后,当依赖项变化时,回调也会执行
  watchEffect(() =>{
    //console.log('watchEffect'); 没有数据
    console.log('watchEffect',num.value)  //显示数据
  })
  setInterval(() => {
    num.value++
    //console.log(num.value);
  },2000)
</script>
<template>
  
</template>

<style lang="less" scoped></style>

watchEffect是一种更加特殊的watch

1.它不关心前后值

2.它会自己执行一次,并自动收集依赖

3.依赖项变化,就正常执行回调