相同点

1、两者都可以监听data属性变化
2、watch 与 watchEffect 在手动停止侦听、清除副作用 (将 onInvalidate 作为第三个参数传递给回调)、刷新时机和调试方面有相同的行为。

区别

1、watch需要明确监听哪个属性
2、watchEffect会根据其中的属性，自动监听其变化
3、watcheffect初始化时，一定会执行一次（收集要监听的数据，不然不知道监听的是什么），watch只有你设置了初始化监听才会监听

  const numberRef = ref(100)
  const state = reactive({
    
    
      name: 'test',
      age: 20
   })

watch:

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

        setTimeout(() => {
    
    
            numberRef.value = 200
        }, 1500)

        watch(
            // 第一个参数，确定要监听哪个属性
            () => state.age,

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

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

        setTimeout(() => {
    
    
            state.age = 25
        }, 1500)
        setTimeout(() => {
    
    
            state.name = 'testA'
        }, 3000)

watchEffect

watchEffect(() => {
    
    
            // 初始化时，一定会执行一次（收集要监听的数据）
            console.log('hello watchEffect')
        })
        watchEffect(() => {
    
    
            // 监听的是state.name 不会监听state.age
            console.log('state.name', state.name)
        })
        watchEffect(() => {
    
    
            console.log('state.age', state.age)
        })
        watchEffect(() => {
    
    
            console.log('state.age', state.age)
            console.log('state.name', state.name)
        })
        setTimeout(() => {
    
    
            state.age = 25
        }, 1500)
        setTimeout(() => {
    
    
            state.name = 'test1'
        }, 3000)