vue中的computed属性

computed属性的特性

• computed属性依赖于data中的变量。
• 计算属性定义的方法必须存在返回值。
• 当依赖的数据发生变化时，会直接重新调用该计算属性的方法。
• 有方法形式和对象形式。方法形式时，为只读get。对象形式，可写set可读get。
  如下：

  new Vue({
    el: '#root',
    data: {
      msg: 0
    },
    computed: {
    //dealMsg2只读
      dealMsg2 () {
        return this.msg + 1
      },
      //dealMsg可读可写
      dealMsg: {
        get: function () {
          return this.msg + 1
        },
        set: function (v) {
          this.msg = v - 1
        }
      }
    }
  })

• 方法形式时，一般无参数。对象形式时，set方法需要传入参数，用于改变data属性中的值。
  那么如何传参呢？
  如下：

<div>通过dealMsg 的set改变msg的值：{{dealMsg = 20}}</div>

如果是改变msg的值后，得到相关处理数据，则通过dealMsg的get属性

<div>通过dealMsg 的get得到msg的值：{{dealMsg }}</div>