Vue教程4-计算属性与监听属性

计算属性与监听器

计算属性 computed

data对象里面的是普通声明的属性property，还有一类属性，它们存在于computed对象中，叫做计算属性。

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

很明显，在上面的例子中，function函数是作为reversedMessage属性的getter函数。

那我们为什么需要计算属性呢？？？？？？

在我们的例子中，计算属性reversedMessage的值是要依赖普通属性message的，因此，我们就把这种需要依赖多种属性的属性叫做计算属性。

上面我们介绍了计算属性的getter，现在我们要介绍计算属性的setter，通过赋值会改变计算属性，因此计算属性以来的普通属性也需要相应的进行改变，当然，这需要我们手动设置。

var vm = new Vue({
	el: '#example',
	data: {
		message: 'Hello'
	},
	computed: {
		// 计算属性的 getter
		reversedMessage: {
			get () {
  				// `this` 指向 vm 实例
  				return this.message.split('').reverse().join('')
			},
			set(newValue) {
					this.reversedMessage = newValue
					// 显示的改变message这个属性的value
					this.message = this.reversedMessage .split('').reverse().join('')
			}
	 }
})

监听器 watch

在一个Vue实例里面，还包含一种对象，我们叫它监听器属性 watch，简单来说就是用 watch 来监听属性的更新。

我们为什么有需要监听器属性呢？？？？？？？？？？

一个属性会影响其他多种属性的时候，我们就需要监听这个重要的属性，从而及时更新被影响的属性。

var vm = new Vue({
	el: '#example',
	data: {
		message: 'Hello'，
		change：true
	},
	computed: {
		// 计算属性的 getter
		reversedMessage: function () {
  		// `this` 指向 vm 实例
  			return this.message.split('').reverse().join('')
		}
	 },
	 watch: {
	 	// 当change改变时，就会影响message的值，因此需要监听
	 	change: function(){
	 		this.message = '1234567'
	 	}
	 }
})

计算属性的setter和watch有些相似，我个人更倾向于使用监听器，因为就不需要我们时刻调用setter，watch会时刻帮助我们关注监听的属性，一旦发生变化就会响应。