Vue 计算属性和侦听器的使用记录

计算属性

设计的初衷是为了简化模板中的逻辑，可以将简单的计算赋值给一个新的元素

基础例子

<div>
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</div>

data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vue 实例
      return this.message.split('').reverse().join('')
    }
  }

this.reversedMessage 的值始终取决于 this.message 的值。因此当 this.message 发生改变时,this.reversedMessage 也会更新

计算属性缓存 vs 方法

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

写法不一样

methods: {
  reversedMessage () {
    return this.message.split('').reverse().join('')
  }
}

两种方式的最终结果确实是完全相同的。但是计算属性是根据它的依赖而进行缓存更新的，只有在依赖改变时，才会触发执行，如果依赖不改变，那么该计算属性只会取上一次的值，而方法每当触发重新渲染时，总会再次执行函数。

注意：如果计算属性依赖的值不是响应式的，那么计算属性就不会更新

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

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

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

现在再运行 this.fullName = ‘John Doe’ 时，setter 会被调用，this.firstName 和 this.lastName 也会相应地被更新。

侦听器

类似计算属性，某个属性发生改变时，便会执行某个方法

watch

  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

computed

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

对比一下就会发现，computed更简洁，watch是命令式且重复的，因此当有一些数据需要随着其它数据变动而变动时，更多的选择应该是computed

在数据变化需要执行异步或开销较大的操作时，使用watch