1、计算属性

案例：

在两个文本框输入值影响下面的全名：

1.1、插值语法实现：

    
    
    
    
    
    


    

        姓：


        名：


        全名：{{firstName.slice(0,3)}}_{{lastName}}
        
    

    
    

1.2、methods实现

重新解析模板就会引起页面上的数据改变。重新解析模板时里面的插值语法里面的数据也会重新从_data里面获取。插值语法里的方法也会重新调用。

    

        姓：


        名：


        全名：{{showInfo()}}
        
    

    

1.3、计算属性实现

计算属性

1 .定义：要用的属性逻辑上其实不存在，需要通过已有属性(指vue管理的属性)计算得来

2 .原理：底层借助了 Objcet.defineproperty()方法提供的 getter 和 setter

3 . get函数什么时候执行？
a.vue初次读取模板时会执行一次
b.当依赖的数据发生改变时会被再次调用

4 .优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便

5 .备注
a.计算属性最终会出现在vm上，直接读取使用即可
b.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
c.如果计算属性确定不考虑修改，可以使用计算属性的简写形式

6、使用：
vue配置对象里的computed属性里面配置对象里的就是计算属性。每个计算属性的值也是一个对象。

    

        姓：


        名：


        全名：{{fullName}}        
    

    

2、监听属性

天气案例：

    
    
    
    
    
    


    

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

    
    

侦听属性基本用法

watch监视属性
1 .当被监视的属性变化时，回调函数自动调用，进行相关操作

2 .监视的属性必须存在且是vue管理的，才能进行监视，既可以监视data里的属性 ,也可以监视计算属性

3 .配置项属性 immediate:false ,改为 true,则初始化时调用一次 handler(newValuejOldValue)

4 .监视有两种写法：
a.创建Vue时传入watch: {)配置
b.通过 vm.$watch()监视

        const vm=new Vue({
            el:"#root",
            data:function(){
                return{
                    isHot:true
                }
            },
            methods:{
                changeWeather:function(){
                    this.isHot=!this.isHot;
                }
            },
            computed:{
                info:{
                    get:function(){
                        return this.isHot?"炎热":"凉爽"
                    }
                }
            },
            
            //方式一：在创建时候就通过配置项进行绑定监视
            // watch:{//watch用来存对属性进行监测的配置对象

            //     isHot:{//isHot为被监听的属性名，也就是isHot属性的监听。

            //         immediate:true,//初始化时让handler函数先调用一次。

            //         //handler函数什么时候调用？当isHot属性发送改变时
            //         handler:function(newValue,oldValue){
            //             console.log(`isHot被修改了，新的值：${newValue}，旧的值：${oldValue}`);

            //         }


            //     }
            // },
            
        });

        //方式二：vm实例创建后再绑定监视

        vm.$watch("isHot",{
            handler:function(newValue,oldValue){
                console.log(`isHot被修改了，新的值：${newValue}，旧的值：${oldValue}`);
            }
        });

2.1 深度侦听

1 . Vue中的watch默认不监测对象内部值的改变（一层）
2 .在watch中配置deep:true可以监测对象内部值的改变（多层）
注意
1 . Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
2 .使用watch时根据监视数据的具体结构，决定是否采用深度监视

    

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


        
a的值是：{{numbers.a}}
        点我让a+1

        
b的值是：{{numbers.b}}
      
        点我让b+1
        
    

    

Vue中的watch属性的值的简写：简写就无法写别的配置对象，只有handler的功能。
如果监视属性除了handler没有其它配置项就可以使用简写。

watch:{
                isHot:function(newValue,oldValue){
                    console.log(`isHot被修改了，新的值：${newValue}，旧的值：${oldValue}`);
                },
            },

2.2 计算属性和侦听属性的区别：

computed和watch之间的区别

• computed能完成的功能，watch都可以完成

• watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

• 两个重要的小原则
  ①所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
  ②所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成
  箭头函数，这样this的指向才是vm或组件实例对象。

    
    
    
    
    
    


    

        姓：


        名：


        全名：{{fullName}}