watch 和 watchEffect 的区别

• 两者都可监听 data 属性变化

• watch 既要指明监视的属性，也要指明监视的回调。 默认是惰性执行，监听源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref

• watchEffect 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。会根据其中的属性，自动监听其变化。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

<script>
import { reactive, toRefs, ref, watch, watchEffect } from 'vue'
export default {
  setup() {
    const numberRef = ref(10)
    const state = reactive({
      name: '张三',
      age: 20,
    })
    watchEffect(() => {
      // 初始化时，一定会执行一次（收集需要监听的数据）
      console.log('watchEffect', state.age)
    })
    watchEffect(() => {
      console.log('watchEffect', numberRef)
    })
    // watch监听ref属性
    watch(numberRef, (newNum, oldNum) => {
      console.log('ref watch', newNum, oldNum)
    })
    // watch监听state属性
    watch(
      // 1.确定监听哪个属性
      () => state.age,
      // 2.回调函数
      (newState, oldState) => {
        console.log('state watch', newState, oldState)
      },
      // 3.配置项
      {
        immediate: true, // 初始化之前就监听
        // deep: true // 深度监听
      }
    )
    setTimeout(() => {
      numberRef.value = 100
    }, 1000)
    setTimeout(() => {
      state.age = 25
    }, 1500)
    return { numberRef, ...toRefs(state) }
  },
}
</script>