vue学习笔记9----监视属性

监视属性watch（侦听属性）

1、当被监视的属性变化时，handler函数自动调用。

2、监视的属性必须存在才能进行监视。

3、监视属性的两种写法：

        watch配置

        vm.$watch

深度监视

1、vue中的watch默认不监测对象内部值的改变（默认只监测一层）。

2、配置deep：true可以监测对象内部值的变化（多层）。

备注：

vue自身可以监测对象内部值的变化，但是vue提供的watch默认不可以。

使用watch时根据数据的具体结构，决定是否采用深度监视。

 

监视属性与计算属性对比

姓名案例之计算属性：

    

        姓：    


        名：    


        全名：{{fullName}} 
    

姓名案例之监视属性：

    

        姓：    


        名：    


        全名：{{fullName}} 
    

总结

computed 和 watch 的区别

        1、computed能实现的功能，watch都可以实现。

        2、watch能实现的功能，computed不一定能实现。例如：watch可以进行异步操作。

        3、总的来说，computed更简单，但是有些功能无法实现。

两个重要的原则

        1、所有被vue所管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

        2、所有不被vue所管理的函数（定时器回调函数，Ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

天气案例之一般实现

    

        
        
今天天气很{{info}}
        切换天气
        
        切换天气-简写
    

天气案例之监视属性实现

    

        
        
今天天气很{{info}}
        切换天气
    

天气案例之深度监视

    

        
今天天气很{{info}}
        切换天气
        


        
a的值是：{{numbers.a}}
        点击按钮，使a+1

        
b的值是：{{numbers.b}}
        点击按钮，使b+1
    

天气案例之监视属性简写

    

        
今天天气很{{info}}
        切换天气