Vue学习笔记（2）计算属性与观察者-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

计算属性

主要用以处理复杂的逻辑。

如下例：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

reversedMessage 与message 绑定依赖于message ，所以在message 更新时reversedMessage 也会更新，这里的处理类似于管道。与function不同，计算属性基于reversedMessage 与message 之间的依赖进行缓存。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性与侦听属性

<div id="demo">{{ fullName }}</div>


var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
//侦听属性
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
//计算属性
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

设置计算属性的setter

computed: {
  fullName: {
    // getter
    get: function () {
          },
    // setter
    set: function (newValue) {
      
    }
  }
}

转载于:https://my.oschina.net/twleo2016/blog/1603028