vue监听的学习

vue2监听watch

vue2的监听有deep和immediate

watch: {
     queryData: {
         handler: function() {
            //do something
         },
         deep: true,//深度监听
         immediate: true,//立即执行
     }
}

如果只想监听对象里面的某个属性

watch: {
     "queryData.name": {
         handler: function() {
            //do something
         }
     }
}

vue3的watch的hooks

import { nextTick, ref, watch } from 'vue'
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})
//侦听器还可以使用数组以同时侦听多个源：
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})