3-计算属性与侦听器

计算属性

在模板中放入太多的逻辑会让模板过重且难以维护,对于任何复杂逻辑,你都应当使用计算属性

  <div id="example">
    {{ message.split('').reverse().join('') }}
  </div>

基础例子
  <div id="example"> <p> {{ reversedMessage }}</p> </div>
  var vm = new Vue({
    el: '#example',
    data: {message: 'Hello' },
    computed: {
      reversedMessage() {   /* 声明一个计算属性, 提供reversedMessage计算属性的 getter */
        return this.message.split('').reverse().join('');   /* `this` 指向 vm 实例 */
      }
    }
  })
  console.log(vm.reversedMessage) // => 'olleH'

计算属性缓存 vs 方法

· 将同一函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的
· 不同的是计算属性是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值
· 只要依赖的数据还没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数
· 计算属性相比方法之下，每当触发重新渲染时，调用方法将总会再次执行函数

    <p>Reversed message: "{{ reversedMessage() }}"</p>
    // 在组件中
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }

	 /* 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖 */

      computed: {
        now: function () {
          return Date.now()
        }
      }

计算属性 vs 侦听属性
watch(命令式): 侦听属性, 当需要在数据变化时执行异步或开销较大的操作时,这个方式最适合

  <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
      }
    }
  })

将watch:{}与计算属性的版本进行比较

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

计算属性的 setter

1、计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
2、计算属性的 setter 被调用时, 依赖于 data() 中的数据会被修改并且会更新

  computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }