13-watch侦听器(监视器)

watch侦听器(监视器)

作用: 监听数据变化, 执行一些 业务逻辑 或 异步操作.

语法:

        1. 简单写法 -> 简单类型数据,直接监视

        2. 完整写法 -> 添加额外配置项

                deep: true 对复杂类型深度监视

                immediate: true 初始化立刻执行一次handler方法

简单写法 -> 监视简单类型的变化:

watch: {
    数据属性名 (newValue,oldValue) {
    一些业务逻辑 或 异步操作
    },
    '对象.属性名'(newValue,oldValue) {
    一些业务逻辑 或 异步操作
    }
}

    
    
    





    



        
        

            

                
                文档翻译
            
            

                
{{ result }}
            
        


    


    
    

    

完整写法 -> 添加额外的配置项(深度监视复杂类型,立即执行):

需求: 输入内容,修改语言,都实时翻译

data:{
    obj:{
    words: 'xxx',
    lang: 'italy'
    }
},

watch:{ //watch完整写法
    数据属性名:{
        deep: true, // 深度监听(针对复杂类型)
        immediate:true, //是否立刻执行一次handler
        handler (newValue) {
            console.log(newValue)
        }
    }

}

    
    
    





    

        
        

            翻译成的语言: 
            
                意大利
                英语
                德语
            
        


        
        

            

                
                文档翻译
            
            

                
{{ result }}