watch 和 watchEffect 的区别

watchEffect 是新特性

• 两者都可以监听 data 属性变化
• watch 需要明确监听哪个属性
• watchEffect 会根据其中的属性，自动监听其变化

例子

 <template>
  <p>watch vs watchEffect {{ numberRef }} {{ name }} {{ age }}</p>
</template>

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

export default {
  name: "Watch",
  setup() {
    const numberRef = ref(100)
    const state = reactive({
      name: 'lzw.',
      age: 20
    })

    // ==== watch =====
    watch(numberRef, (newVal, oldVal) => {
      console.log('ref watch', newVal, oldVal) // ref watch 100 undefined
    }, {
      // immediate: true,// 初始化之前就监听，可选
    })

    watch(
        // 参数一，要监听的属性
        () => state.age,

        // 参数二，回调函数
        (newAge, oldAge) => {
          console.log('state watch', newAge, oldAge) // state watch 25 20
        },

        // 参数三，配置项
        {
          immediate: true, // 初始化之前就监听，可选
          deep: true // 深度监听
        }
    )

    // ==== watchEffect =====
    watchEffect(() => {
      // 初始化时，一定会执行一次（收集要监听的数据）
      console.log('hello watchEffect')
      // 自动监听 state.name
      console.log('state.name', state.name) // state.name lzw.A
    })


    setTimeout(() => {
      state.age = 25
    }, 1000)
    setTimeout(() => {
      state.name = 'lzw.A'
    }, 1000)

    return {
      numberRef,
      ...toRefs(state)
    }
  }
}
</script>