VUE-watch和watchEffect的区别

区别简短扼要地说：

        watch-官方定义：侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。是需要指定监听的数据，并且只有在响应式数据变化的时候去执行

        watchEffect-官方定义：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。它是不用指定的。

watch官网例子：

const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

watchEffect官网例子：

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 输出 0

count.value++
// -> 输出 1

这里有三个补充：

补充（1）：

监听器是可以停止的，我曾经也想过要停止它，我是这么写的，就是让监听器只执行一次：

const count = ref(0)
let a = true
watch(count, (count, prevCount) => {
     if(a){
        //写逻辑
        a =false
     }
            
})

官网上是这么做的，只要在需要停止的地方调用即可：

补充（2）：

请看以下两种写法：

// 第一种
const state = reactive({ count: 0 })
watch( () => state.count, (count, prevCount) => {
    /* ... */
  }
)


// 第二种
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

它们的区别是什么？

第一种：

监听对象中某一个属性变化（reactive)，强烈建议使用此方式监听reactive响应对象数据（无坑）

第二种：

监听单个基本数据类型(ref)，（ref定义的基本类型使用watch监听的时候不需要.value）

补充（3）：

监听对象(reactive)，不建议使用

    watch(state,(newVal, oldValue) => {
        console.log(newVal, oldValue);  //{name: '小白', age: 23},{name: '小白', age: 23}
      },
      { deep: false }
    );

这里只能拿到新的值（newVal），拿不到旧值，并且深度监视好像无效。

多说一嘴：

监听对象中某几个属性是可以的（reactive)

 watch([() => obj.name, () => obj.age], (newVal, oldValue) => {
       console.log(newVal, oldValue);   //得到的是对象
       }
    );