Vue中的 watch监听属性详情

目录

• 一.watch监听一般数据的变化(数值，字符串，布尔值)
• 1.数值
  
• 2.字符串
  
• 3.布尔值
  
• 二.watch 监听 复杂类型数据的变化
• 1.对象
  
• 2.数组
  
• 3.对象数组
  
• 4.对象数组的属性
  

首先要确认 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);
                }
            }
        })

当我们点击按钮时，查看控制台：

 注意：在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);
                    }
                }
            }
        })

当点击按钮切换时，查看控制台：

二.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
                }
            }

滑动时查看输出结果：

2.数组

    
    

        

            
{{item}}
        
        
        点击添加
    
 
    
    

点击添加元素后，查看输出结果：

3.对象数组

    
    

        

            

                {{item.id}}--{{item.name}}
            
        
        
        
        
        添加
    
 
    
    

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

4.对象数组的属性

    
    

        

            

                {{x.id}}---{{x.name}}  
                修改
            
        
    
 
    
    

点击修改时，查看输出结果：

到此这篇关于Vue中的 watch监听属性详情的文章就介绍到这了,更多相关Vue中的 watch监听属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！