vue2中，计算属性及监听的完整示例——computed-return的值不需要data里定义 & watch的handler方法之immediate属性-是否先执行一次、deep属性-是否深度监听

vue2中，计算属性及监听的完整示例——computed-return的值不需要data里定义 & watch的handler方法之immediate属性-是否先执行一次、deep属性-是否深度监听

1、计算属性 computed

html

<span>{{fullName}}</span>

js

data: {
    firstName: '张',
    lastName: '三'
},
computed: {
    fullName: {
        // get有什么作用？当读取fullName时，get就会被调用，且返回值就作为fullName的值。
        // get什么时候被调用？ 1.初次读取fullName时  2.所依赖的数据发生变化时
        get(){
            return this.firstName + this.lastName
            // return '李四'
        },
        // set什么时候被调用？当fullName被修改时
        set(){
            this.firstName = '李'
            this.lastName = '四'
         }
    }
}

计算属性的简写形式：

data: {
    firstName: '张',
    lastName: '三'
},
computed: {
    fullName() {     //这里的 fullName 是值，不是函数！！！
        return this.firstName + this.lastName   //将计算后的值返回给fullName
     }
}

2、监听属性 watch

监听：监听数据源的一个数据改变引起其他数据改变的方法；只要监听的数据改变就执行该数据的方法；

• 第一个参数是监听数据的最新的值，
• 第二个参数是监听的数据的上一次的值；

注意：如果监听的是对象要加上deep：true深度监听属性

handler方法：

• 里面有两个参数，和上面一样，第一个参数是新数据，第二个参数是上一次的数据；

• immediate属性指的是是否先执行一次（true指的是监听的数据源还没有改变的时候先执行一次）

• deep属性是否深度监听

示例

<template>
    <div>     
	   <p>{{text}}</p>
    </div>
</template>

<script>
export default{
    data(){
        return{
            text:'',
            nameInfo:{
                name:'',
                age:12,
            }
        }
    },
    watch:{      
        // 监听text属性的变化，参数1是更新的数据，参数2是上次的数据
        text: function (val,old){
          this.val = val*100
          this.old = old
        }，
        // 写法一
        nameInfo: {
          deep:true,
          handler(newValue) {
            if (newValue || newValue === '') {
            this.displayConvertPinyin(newValue);
          }
        },
        immediate: true,
      },
      // 写法二  
      nameInfo: function (val,old){
         // 监听text属性的变化，参数1是更新的数据，参数2是上次的数据
         this.name = '李世民'
         this.age = 35
      }，
      // 监听属性是对象的话进行深度监听
      deep:true    
    
      // 写法三
      '$store.state.map.editObjData': {
        handler(value){
          renderService.highlightFeature(value)
        },
        deep: true,
        immediate: true,
      }    
    }
}
</script>

html

<span>{{isHot ? '晴天':'雨天'}}</span>

<button @click="onClick">切换天气</button>

js

data: {
    isHot: true
},
methods: {
    onClick(){
        this.isHot = !this.isHot
    }
},
// 监视属性可以监视data中的值，也可以监视计算属性中的值
watch: {
    isHot: {
        // immediate为true表示初始化时让handler调用一下
        immediate: true,
        // 深度监视，一般用于监视多层数据结构的时候用到，比如对象中某个数据的变化
        // deep: true,
        // handler什么时候调用？当isHot发生改变时，里面可以观察到旧值和新值的变化。
        handler(newValue, oldValue){
            console.log('被调用了', newValue, oldValue)
        }
     }
}

监听属性的简写形式：

• 注意在不使用immediate、deep的时候可以使用简写形式

data: {
    isHot: true
},
methods: {
    onClick(){
        this.isHot = !this.isHot
    }
},
// 注意在不使用immediate、deep的时候可以使用简写形式
watch: {
    isHot(newValue, oldValue) {
           console.log('被调用了', newValue, oldValue)
        }
     }
}

监听属性的完整写法：

vm.$watch('isHot', {
    // immediate: true,
    // deep: true,
    handler(newValue, oldValue){
            console.log('被调用了', newValue, oldValue)
    }
})

//或者
vm.$watch('isHot', function(){
    // immediate: true,
    // deep: true,
    console.log('被调用了', newValue, oldValue)
})

应用案例：

watch:{
    '$route.query.id'(newValue, oldValue){
        console.log('变化', newValue, oldValue)
        location.reload()                       // 当路由中参数变化时，刷新当前页面
    }
}