初学vue3之watchEffect

一、上一期我学习了vue3中watch的用法，这一期带来一个很特别的api watchEffect,它也可以用于监听属性，但是它的特别之处就是可以监听某个属性的变化，且它无法获取oldValue,而且它是当你用到的属性发生变化时就能检测到它的变化，非常的巧妙。

watchEffect的用法
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    let msgData = '';
    let person = reactive({
      name:'大狗',
      age:18
    })
   
    watchEffect(()=>{
      console.log('name',person)
    })
    const editName = ()=>{
      person.age++
    }
    return {
      updateData,
      ...toRefs(person),
      editName
      
    }
  }
}

watchEffect是直接写回调函数的，它能实时监控到属性的变化，当你想要监听多个属性时，这个api就显得非常方便了，在回调函数里写你监听的属性的逻辑即可，它有一下几个特点：

1.  watchEffect 不需要手动传入依赖
2  watchEffect 会先执行一次用来自动收集依赖
3  watchEffect 无法获取到变化前的值， 只能获取变化后的值