计算属性和侦听属性（computed和watch）

计算属性和侦听属性（computed和watch）

计算属性的应用(computed计算属性方法区)

1、描述：表达式太复杂的情况会导致组件模板难以维护，而且多个地方使用到相同的表达式会导致重

<template>
  <div>
    <!--表达式太复杂的情况会导致组件模板难以维护，而且多个地方使用到相同的表达式会导致重复-->
    <div>
      <!--type和msg的拼接表达式-->
      {{type + ":" +msg}};
    </div>
    <!--使用计算属性解决这类问题-->
    <div>{{type_msg}}</div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        type:"demo",
        msg:"news",
      }
    },
    /*计算属性方法区*/
    computed:{
      type_msg(){
        return this.type + ":" +this.msg;
      }
    },
    methods: {

    }
  }
</script>

2、也可以通过函数方式到达计算属性的效果（不推荐）

<!--使用函数达到计算属性的效果-->
    <div>{{getTypeMsgFunc()}}</div>

methods: {
      getTypeMsgFunc(){
        return this.type + ":" +this.msg;
      }
    }

> 小结：为什么不推荐使用函数的方式达到computed计算属性的效果呢，原因是computed就算属性是具有dom缓存功能的，当数据方式变化时，计算属性会依据dom缓存中的数据来进行计算更新，反之数据无变化则不会重复计算。函数的方式实现则是无论数据是否发生改变都会重复的调用函数，性能低，故不推荐使用函数方式实现。

3、计算属性方法中的get和set方法
其中get方法用于获取计算属性return的值，set方法用来修改计算属性的值

<template>
  <div>
    <!--表达式太复杂的情况会导致组件模板难以维护，而且多个地方使用到相同的表达式会导致重复-->
    <div>
      <!--type和msg的拼接表达式-->
      {{type + ":" +msg}};
    </div>
    <!--使用计算属性解决这类问题-->
    <div>{{type_msg}}</div>
    <!--使用函数达到计算属性的效果-->
    <div>{{getTypeMsgFunc()}}</div>
    <button @click="modifyTypeMsg()">修改typeMsg</button>
  </div>
</template>

computed:{
      /*type_msg(){
        return this.type + ":" +this.msg;
      }*/
      type_msg:{
        get () {
          return this.type + ":" +this.msg;
        },
        set (newTypeMsg) {
          let arr = newTypeMsg.split(" ");
          this.type = arr[0];
          this.msg = arr[1]
        }
      }
    },

methods: {
      getTypeMsgFunc(){
        return this.type + ":" +this.msg;
      },
      //在改方法修改变量值后，可以在计算属性方法中通过set方法进行计算获取新的值
      modifyTypeMsg(){
        this.type_msg = "Rich Brian"
      }
    }

侦听属性的应用（watch监听）

watch可以监听到data里面的数据变化，即监听到下列中的type或者msg发生变化时，执行一个什么样的函数（该场景下不推荐使用，用computed计算属性可以实现）

<button @click="modifyType()">修改type</button>
    <button @click="modifyMsg()">修改Msg</button>

modifyType(){
        this.type = "时间"
      },
      modifyMsg(){
        this.msg = "2021年"
      }

watch:{
      //watch可以监听到data里面的数据变化
      //即监听到type或者msg发生变化时，执行一个什么样的函数
      type(newVal){
        this.type_msg = newVal + ":" + this.msg
      },
      msg(newVal){
        this.type_msg = this.type + ":" + newVal
      }
    }

小结：
computed使用场景：某个数据受多个数据影响（类似于拼接），或者需要对其他数据进行js处理后在显示的情况
watch使用场景：一个数据的变化会影响多个数据或者一个数据的变化需要执行异步操作

watc监听的使用场景示例：

    <div>语言：{{language}}</div>
    <button @click="switchLang('ch')">中文</button>
    <button @click="switchLang('en')">English</button>
    <div>{{zhangsan}}</div>
    <div>{{lisi}}</div>

data () {
      return {
        language:'cn',
        zhangsan:'张三',
        lisi:'李四',
      }
    },

switchLang(val){
        this.language = val;
      }

watch:{
      language(newVal){
        if (newVal==='ch'){
          this.zhangsan =  "张三"
          this.lisi  = "李四"
        }else if (newVal === 'en'){
          this.zhangsan = 'zhangsan'
          this.lisi = 'lisi'
        }
      },
      immediate:true, //immediate为true时立刻执行
    }

即上列中的语言中英文变量的切换会影响到zhangsan和lisi多个变量的变化，故采用watch监听来进行修改较为推荐