Vue中的 watch监听属性

在Vue 中,computed计算属性用来监听多个数据;watch 监听单个数据;

首先要确认 watch是一个对象,要当成对象来使用。

键:就是那个,你要监听的那个家伙;

值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参

第一个是当前值(新的值),第二个是更新前的值(旧值)

值也可以是函数名:不过这个函数名要用单引号来包裹。

值是包括选项的对象:选项包括有三个。 1.第一个 handler:其值是一个回调函数。即监听到变化时应该执行的函数。 2.第二个是 deep:其值是 true 或 false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。) 3.第三个是 immediate:其值是 true 或 false;确认是否以当前的初始值执行 handler 的函数。


watch监听一般数据的变化(数值,字符串,布尔值)

举例说明:

1.数值

在data数据中心的num,当我们通过点击事件让它发生变化时,通过watch监听属性监听它的变化

{{num}}

      let vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            watch:{
            // 当前值(已经改变的值)newval  旧值 oldval
                num:function(newval,oldval){
                    console.log("新值是:"+newval);
                    console.log("旧值是:"+oldval);
                }
            }
        })

当我们点击按钮时,查看控制台:

Vue中的 watch监听属性_第1张图片

 注意:在watch中还有其他两种方法

 watch:{
            // 当前值(已经改变的值)newval  旧值 oldval
                // num(newval,oldval){
                //     console.log("新值是:"+newval);
                //     console.log("旧值是:"+oldval);
                // }
                num:{
                    handler(newval,oldval){
                    console.log("新值是:"+newval);
                    console.log("旧值是:"+oldval);
                    }
                }
            }

输出结果是一致的,下面的例子统一使用第三种方法,也就是带handler的方法。

2.字符串

输入的内容为:{{mes}}

 let vm = new Vue({
            el:'#app',
            data:{
                mes:''
            },
            watch:{
                mes:{
                    handler(newval,oldval){
                        console.log("新的内容:"+newval);
                        console.log("旧的内容:"+oldval);
                    }
                }
            }
        })

当我们在文本框内输入内容时:

查看输出结果:


 3.布尔值

通过修改布尔值显示和隐藏

 

let vm = new Vue({
            el:'#app',
            data:{
                isShow:true
            },
            watch:{
                isShow:{
                    handler(newval,oldval){
                        console.log("新的值:"+newval);
                        console.log("旧的值:"+oldval);
                    }
                }
            }
        })

当点击按钮切换时,查看控制台:

Vue中的 watch监听属性_第2张图片


  watch 监听 复杂类型数据的变化

deep 属性:深度监听对象变化 (代表是否深度监听),当需要监听一个对象的改变时,普通的 watch 方法无法监听到对象内部属性的改变,此时就需要 deep 属性对对象进行深度监听。

1.对象

输入的内容是:{{mes.name}}

let vm = new Vue({
            el:'#app',
            data:{
                mes:{name:''}
            },
            watch: {
                mes:{
                    // watch监听属性监听对象时新旧值时相同的
                    handler(newval){
                        console.log("新值为:"+this.mes.name);
                    },
                    deep:true
                }
            }
        })

在文本框中输入内容后,查看控制台:

也可以在对象中添加num,通过滑动杆来控制num的值,并监听:

 
 data:{
                mes:{name:'',num:''}
            },

watch: {
                mes:{
                    // watch监听属性监听对象时新旧值时相同的
                    handler(newval){
                        console.log("num新值:"+this.mes.num);
                    },
                    deep:true
                }
            }

滑动时查看输出结果:

Vue中的 watch监听属性_第3张图片


2.数组


    
    
  • {{item}}

点击添加元素后,查看输出结果:


 3.对象数组


    
    
  • {{item.id}}--{{item.name}}

添加新元素后查看输出结果:

Vue中的 watch监听属性_第4张图片


4.对象数组的属性


    
    
  • {{x.id}}---{{x.name}}  

点击修改时,查看输出结果:

Vue中的 watch监听属性_第5张图片

 

你可能感兴趣的:(vue,前端,vue.js)