vue监听的学习

Auaaa

已于 2022-05-31 14:38:06 修改

阅读量1.3k

点赞数

分类专栏： vue框架的学习与应用文章标签： vue.js

于 2022-04-24 16:54:45 首次发布

本文链接：https://blog.csdn.net/Auaaa/article/details/123686345

版权

vue框架的学习与应用专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了Vue2和Vue3中watch的使用方式，包括深度监听(deep)和立即执行(immediate)选项。在Vue2中，展示了如何监听对象属性以及整个对象。而在Vue3中，通过引入的ref和watch，讲解了如何监听getter，直接监听ref，以及同时监听多个源。这些内容有助于理解Vue组件状态变化的响应式处理。

摘要由CSDN通过智能技术生成

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]) => {
  /* ... */
})