Vue中的计算属性和监听属性

Vue中的计算属性和监听属性

在项目中难免会遇到计算属性和监听属性，这两个都可以 监听数据的变化，但是又有些不同，在这里总结一下

一、computed计算属性

当需要监听一些数据需要随着其它数据变动而变动时，通常更好的做法是使用计算属性

1. 使用插值表达式获取计算属性的值

<template>
   <div>
    <Form :model="info" label-position="right" :label-width="100" class="sales-center-form">
      <FormItem label="单价">
        <Input v-model="info.单价"/>
      </FormItem>
      <FormItem label="数量">
        <Input v-model="info.数量"/>
      </FormItem>
      <FormItem label="总价">
        //第一种用法,使用插值表达式获取计算属性的值
        {{ totalMoney }}
      </FormItem>
    </Form>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        info: {
          '单价': 5,
          '数量': 8
        }
      } 
    },
    computed: {
      totalMoney(){
        var _that = this;
        var total = 0;
        total = _that.info.单价 * _that.info.数量;
        return total;
      }
    }
  }
</script>

2. 使用v-model双向绑定数据

<template>
  <div>
    <Form :model="info" label-position="right" :label-width="100" class="sales-center-form">
      //...
      <FormItem label="总价">
        //第二种用法,使用v-model双向绑定数据
        <Input v-model="sumMoney"/>
      </FormItem>
    </From>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        info: {
          '单价': 5,
          '数量': 8
        }
      } 
    },
    computed: {
      sumMoney:{
        get(){ // 计算属性默认只有 getter,如果想要修改sumMoney时添加一个setter 
          var _that = this;
          var total = 0;
          total = _that.info.单价 * _that.info.数量;
          return total;
        },
        set(newValue){
          var _that = this;
          _that.info.单价 = 6;
          _that.info.数量 = newVlue / _that.info.单价; 
        }
      }
    }
  }
</script>

二、watch监听属性

1. 监听对象的属性

<template>
   <div>
    <Form :model="info" label-position="right" :label-width="100" class="sales-center-form">
      <FormItem label="书名">
        <Input v-model="info.书名"/>
      </FormItem>
      <FormItem label="作者">
        <Input v-model="info.作者"/>
      </FormItem>
      <FormItem label="推荐语">
        <Input v-model="text"/>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default{
  data(){
    return {
      info: {
        '书名': '阿弥陀佛，么么哒',
        '作者': '大冰'
      },
      text: '善良是一种天性，善意是一种选择。阿弥陀佛么么哒，是一句祝福，一份善意'
    }
  },
  watch: { //watch监听info的属性,只要info中任意属性改变,text就会清空
    info: {
      deep: true, //在监听对象的属性时，必须添加deep:true,进行深度监听
      handler(){
        var _that = this;
        _that.text = '';
      }
    }
  }
}
</script>

2. 监听数组中对象的属性

监听数组中对象的属性，使用deep:true，已经不管用啦。在这里就需要借助this.$set了。

<template>
  <div>
    <Table border stripe :columns="columns" :data="detail"></Table>
    <Input v-model="text"/>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        columns: [
          {
            title: '书名',
            key: '书名',
            render: (h,params) => {
              return h('Input',{
                props: {
                  value: params.row.书名
                },
                on:{
                  'on-blur': (el) => {
                    var _that = this;
                    params.row.书名 = el.target.value;
                    _that.detail[params.index] = params.row;
                    _that.$set(_that.detail,params,params.row); //使用this.$set深度监听数组中对象的属性
                  }
                }
              },params.row.书名)
            }
          },
          {
            title: '作者',
            key: '作者',
            render: (h,params) => {
              return h('Input',{
                props: {
                  value: params.row.作者
                },
                on:{
                  'on-blur': (el) => {
                    var _that = this;
                    params.row.作者 = el.target.value;
                    _that.detail[params.index] = params.row;
                    _that.$set(_that.detail,params,params.row);
                  }
                }
              },params.row.作者)
            }
          }
        ],
        detail: [
          {
            '书名': '阿弥陀佛，么么哒',
            '作者': '大冰'
          }
        ],
        text: '善良是一种天性，善意是一种选择。阿弥陀佛么么哒，是一句祝福，一份善意'
      }
    },
    watch: {
      detail: {
        deep: true,
        handler(){
          var _that = this;
          _that.text = ''
        }
      }
    }
  }
</script>