Watch数据监听详解

这篇具有很好参考价值的文章主要介绍了Watch数据监听详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、Vue2写法

1、watch使用的几种方法

2、watch中的immediate、handler和deep属性

1.immediate 和 handler

2.deep深度监听

3、总结

二、Vue3写法

1、侦听单个数据

2、侦听多个数据

3、immediate属性

4、deep(深度监听)


一、Vue2写法

1、watch使用的几种方法

1、通过 watch 监听 data 数据的变化,数据发生变化时,就会打印当前的值

 watch: {
     data(val, value) {
         console.log(val)
         console.log(value)
     }
 }

2、通过 watch 监听 list 数据的变化,数据发生变化时,this.number++(使用深度监听)

 data() {
     return {
         list: {
             'id': 1,
             'type': 0
         },
         number: 0
     }
 },
 watch: {
     list: {
         handler(newVal) {
             this.number++
         },
         deep: true
     }
 }

3、通过 watch 监听 data 数据的变化,数据发生变化时,执行 change 方法

 watch: {
     data: 'change' // 值可以为methods的方法名
 },
 methods: {
     change(curVal,oldVal){
    console.log(curVal,oldVal)
   }
 }

2、watch中的immediate、handler和deep属性

1.immediate 和 handler
  1. handler属性在watch中的作用是指定一个回调函数,在监视的数据发生变化时被调用
  2. 这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
 data() {
     return {
         list: {
             'id': 1,
             'type': 0
         },
         number: 0
     }
 },
 watch: {
     list: {
         handler(newVal) {
             this.number++
         },
         immediate: true
     }
 }
2.deep深度监听

        当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听

 data() {
     return {
         list: {
             'id': 1,
             'type': 0
         },
         number: 0
     }
 },
 watch: {
     list: {
         handler(newVal) {
             this.number++
         },
         deep: true
     }    
 }

        设置deep:true则可以监听到 list.id 的变化,此时会给 list 的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行 handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

 data() {
     return {
         list: {
             'id': 1,
             'type': 0
         }
     }
 },
 watch: {
     'list.id': {
         handler(newVal, oldVal) {
              ......
         },
     deep: true
     }    
 }

这样只会给对象的某个特定的属性加监听器

3、总结

        数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听

二、Vue3写法

侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听

1、侦听单个数据

 <script setup>
   // 1. 导入watch
   import { ref, watch } from 'vue'
   const count = ref(0)
   // 2. 调用watch 侦听变化
   watch(count, (newValue, oldValue)=>{
     console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
   })
 </script>

2、侦听多个数据

侦听多个数据,第一个参数可以改写成数组的写法

 <script setup>
   // 1. 导入watch
   import { ref, watch } from 'vue'
   const count = ref(0)
   const name = ref('cp')
   // 2. 调用watch 侦听变化
   watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
       console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName])
   })
 </script>

3、immediate属性

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

 <script setup>
   // 1. 导入watch
   import { ref, watch } from 'vue'
   const count = ref(0)
   // 2. 调用watch 侦听变化
   watch(count, (newValue, oldValue)=>{
          console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
   },{
        immediate: true
   })
 </script>

4、deep(深度监听)

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep文章来源地址https://www.toymoban.com/news/detail-676928.html

 <script setup>
   // 1. 导入watch
   import { ref, watch } from 'vue'
   const state = ref({ count: 0 })
   // 2. 监听对象state
   watch(state, ()=>{
     console.log('数据变化了')
   })
   const changeStateByCount = ()=>{
     // 直接修改不会引发回调执行
     state.value.count++
   }
 </script>
 ​
 <script setup>
   // 1. 导入watch
   import { ref, watch } from 'vue'
   const state = ref({ count: 0 })
   // 2. 监听对象state 并开启deep
   watch(state, ()=>{
     console.log('数据变化了')
   },{deep:true})
   const changeStateByCount = ()=>{
     // 此时修改可以触发回调
     state.value.count++
   }
 </script>

到了这里,关于Watch数据监听详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中使用watch监听同时监听两个数据

    使用场景,创建一个子组件,父组件会向子组件中穿递一个状态 - \\\"status\\\" ,子组件需要同时监听this.$route.params中的值和status,然后再去调方法,所以需要同时监听

    2024年02月11日
    浏览(45)
  • 微信小程序实现类Vue-watch数据监听

    参考链接

    2024年02月12日
    浏览(40)
  • vue3中用watch监听响应式数据的注意点

    如果你在vue3中使用reactive()方法创建响应式数据,然后又用torefs()方法将响应式数据解构成单一的ref响应式数据。 此时,如果你想用watch监听解构出来单一的响应式数据,watch不起作用。 此时,你需要用watch监听之前的reactive()方法创建的数据,这样是能监听到的,要开启深度监

    2024年02月13日
    浏览(40)
  • Vue.js 中的 watch 属性详解

    在 Vue.js 中, watch 属性是一种非常重要的属性,它可以监听 Vue 实例中指定的数据变化,并在数据发生变化时执行相应的操作。本文将对 Vue.js 中的 watch 属性进行详细的介绍,并附上相关的代码示例。 在 Vue.js 中, watch 属性被定义为一个对象,它可以用来监听 Vue 实例中的数

    2024年02月07日
    浏览(45)
  • Vue,js 监听window窗口尺寸变化

    1.监听window窗口变化 VueJs 监听 window.resize 方法,同时窗口拉伸时会频繁触发resize函数,导致页面性能 卡顿 ,可以搭配setTimeout来提升性能 在mounted中挂载resize方法 watch 监听 data中或props传递的数据

    2024年02月11日
    浏览(87)
  • Vue2 Watch监听

    在Vue2中,我们可以使用watch来监听一个数据的变化,并且在数据变化时执行一些操作。这个特性是Vue2非常强大的一个功能,可以帮助我们监控一个或多个数据的变化,然后做出相应的反应。 要使用watch,我们需要在Vue组件的选项中声明一个watch对象,如下: watch对象的每个属

    2024年02月17日
    浏览(54)
  • vue3 watch 监听多值以及深度监听用法

    1.监听单个值 引入: import {…, watch} from “vue”; import {useRouter} from ‘vue-router’; 2.监听多个值 还是上面路由的例子 2.深度监听

    2024年02月14日
    浏览(55)
  • vue watch监听对象 新旧值一样

    废话不多说,直接上代码 通过打印最后发现一个问题,watch中的新旧值一样 解决方案 通过computed剥离与原数据的引用关系

    2024年02月12日
    浏览(40)
  • Vue2 watch监听props的值

    再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的。所以监听props中的值,一直监听。   代码:  

    2024年02月13日
    浏览(44)
  • Vue3前端开发,watch数据侦听器的立即执行

    Vue3前端开发,watch数据侦听器的立即执行!实际上,我们可以通过回调函数的后面,再追加一个对象,来设置这个参数,immediate:true.来实现一种立即执行的效果。在页面记载完成后,马上就会执行一次watch. 如上所示,我们在回调函数的后面,追加了一个参数,是一个对象类型

    2024年01月18日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包