vue3中的watchEffect/watch的理解和应用

基础定义：

watch：

• 用法与vue2大多一样，区别是vue3中的监听的值得是响应式的。例如：ref/reactivecomputed等声明的，否则监听无效。（ref声明的记得加.value）
• 第一个参数：一个响应式对象（复杂数据类型）或者是一个函数返回值（简单数据类型）。
• 第二个参数：函数有两个参数（newVal, oldVal）。
• 第三个参数：{immediate: true，deep:true}

watchEffect：

• 作用同样是监听，监听范围是函数体内用到的对象属性、取值等涉及到的值的变化。自动收集依赖关系。
• 只要依赖值有变化都会执行一遍，所以对该函数体内值的变化不熟悉的慎用。但是用得好的话，事半功倍。（初始自动执行一次）

简单示例：

let str = ref('hello');

watch(() => str.value, (newVal,oldVal) => {
  console.log(newVal)
}, { immediate: true, deep: true })

watchEffect(() => {
  if (str.value == "hello") {
    // do something
  }
  console.log(str.value)
})

setTimeout(() => { str.value = '你好'},3000)

// 可注释一个监听，查看效果