vue计算属性与侦听器的区别

一 . 计算属性 

(1) 作用 : 解决模板语法代码冗余问题

(2) 语法 : computed : {
                    计算属性名(){
                        return 计算属性值
                    }
                }

(3) 注意点 :  a. 计算属性要写在vue实例computed中
                    b. 计算属性函数一定要有返回值

(4) 计算属性的缓存机制 : 
      a. 当第一次使用计算属性的时候, vue会调用一次函数。然后把函数名和返回值平铺到vue实例中。
      b. 之后使用计算属性, vue不会调用这个函数，而是从缓存中直接读取。
      c. 只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存

(5) 代码演示 : 

    
    
    
    
    
    



    
    

        
{{ msg }}
        
{{ revMsg }}
        
{{ revMsg }}
        
{{ revMsg }}
    
    

二 . 侦听器

(1) 作用 : 监听某一个数据变化

(2) 语法 : watch : {
                    要侦听的属性名 (newVal,oldVal) {
                    }
                }

(3) 代码演示 : 

    
    
    
    
    
    





    
    

        用户名: {{ info }}
        

        密码: 
    

    

(4) 深度侦听 : 

a. 作用 : 侦听引用类型内部数据变化

b. 语法 : 

                watch: {

               "要侦听的属性名": {

                deep: true, // 深度侦听复杂类型内变化

                 handler (newVal, oldVal) {}

       }

}

c. 代码演示 : 

    
    
    
    
    
    





    
    

        用户名: {{ info }}
        

        密码: 
    

    

三 . 计算属性与侦听器的区别 : 

(1) 功能不同 : 计算属性是解决模板语法冗余,而侦听器是监听data中某一个数据的变化

(2) 计算属性有缓存，侦听器没有缓存

(3) 计算属性不支持异步操作，侦听器支持异步操作

(4) 计算属性可以新增一个属性，而侦听器一般监听data中的属性，或者监听路由