VUE watch监听器的基本使用方法详解

2022-04-15 370
目录
  • 1、下面代码是watch的一种简单的用法
  • 2、immediate 立即监听
  • 3、handler方法
  • 4、 deep属性
  • 总结

侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行。

监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值。

在vue中,使用watch来响应数据的变化,关于watch的用法大致有三种。

1、下面代码是watch的一种简单的用法

<div id="app">
    <input type="text" v-model="firstName" />
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
var vm=new Vue({
    el:"#app",
    data:{
        firstName:"张"
    },
    watch:{         
        firstName:(newVal,oldVal){
//firstName即为你想监听的数据的名称,要监听谁函数名就用谁的 如监听v-model的firstName                    
//newVal:表示改变后的值,即第一个形参,不要调换位置
//oldVal:表示改变前的值,
            console.log({newVal,oldVal});   //  {newVal: "陈", oldVal: "张"}
        }
        //直接写一个监听处理函数,当每次监听到cityName值发生改变时,执行函数。
        //也可以在所监听的数据后面直接加字符串形式的方法名:firstName: 'nameChange'
    },
    methods:{
        nameChange(){
         }
    }
})
 vm.firstName = "陈";//改变监听的值
</script>

2、immediate 立即监听

使用watch基本用法时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    { immediate: true }
  }
}

监听的数据后面写成对象形式,包含handler方法和immediate,上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。

3、handler方法

<div id="app">
    <div>
        <p>Number: {{ myNumber }}</p>
        <p>Number: <input type="text" v-model.number="myNumber"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        myNumber: 'Dawei'
    },
    watch: {
        myNumber: {
            handler(newVal, oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            //immediate为true时则立即触发回调函数;如果为false,则和上面的例子一样,不会立即执行回调。
            immediate: true
          }
      }
 })
</script>
//handler方法就是你watch中需要具体执行的方法

4、 deep属性

对于对象或者对象中的属性,我们如何监听?那么就介绍deep属性。它的作用就是解决这个问题的关键。

 <div id="root">
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
</div> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
    new Vue({
        el: '#root',
        data: {
            obj: {
                 a: 123
            }
        },
        watch: {
            obj: {
            handler(newName, oldName) {
                console.log(newName, oldName);
            },
            immediate: true,
            deep:true
            }
        } 
})
</script>

上面的代码如果不加deep:true 那么console中就不会执行,只执行第一次,输出结果为undefined

默认情况下 handler 只监听obj这个属性它的引用的变化,我们只有给obj赋值的时候它才会监听到。

这个时候就可以使用deep深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样消耗过大。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript VUE watch监听器的基本使用方法详解 https://www.niceym.com/18247.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情