vue的计算属性 computed

1、基础例子

<div>
<input v-model="message"/>
    <p>message的值: "{{ message }}"</p>
    <p>message的反转值: "{{ reversedMessage }}"</p>
</div>

<script>
data(){
    return {
      message: 'Welcome to Your'
    }
},
computed:{
	// 计算属性geeter
	reversedMessage(){
		// this指向vm 实例
		return this.message.split('').reverse().join('')
	}
}
</script>

在表达式中调用方法也可达到同样的效果

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

计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变的时候才会重新计算求值，只要响应式依赖没有发生改变，计算属性会立即返回之前的计算结果，而不必再次执行函数。

2、计算属性的 setter

计算属性默认只有getter，在需要的时候也可提供一个setter

	// getter
	<input v-model="a"/>
	<p>fullName:{{ aaa }}</p>
	// setter
	<input v-model="lastName"/>
	<p>fullName:{{ fullName }}</p>

data:{
	firstName: 'xiao',
	lastName : 'ming',
	a: 0,
	b: 1
}
computed:{
	// getter 当a或b改变时，就会触发aaa
	aaa(){
		return this.a + this.b
	},
	// setter
	fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter 当 firstName 或 lastName 会触发上面的 get，从而更新fullName
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
}

3、侦听属性 watch

 	<input v-model="firstName"/>
    <p>fullName:{{ fullName }}</p>

data:{
	firstName: 'xiao',
	lastName : 'ming',
	fullName : 'xiao ming' 
}
watch: {
    // 当监听到firstName变化时，给fullName重新赋值
    firstName: function (newVal,oldVal) {
    // val 就是 firstName 的新值
      this.fullName = newVal+ ' ' + this.lastName
    }
  },

4、computed 和 watch 区别

• computed：

1. 支持缓存，当依赖数据发生改变才会进行重新计算。
2. 不支持异步，computed内有异步操作无法监听数据的变化。
3. 计算属性基于响应式依赖进行缓存的，就是基于data中声明的值或父组件传递的props中的数据通过计算得到。

• watch:

4. 不支持缓存，data 或 props 中的数据改变，直接会触发相应的操作。
5. watch支持异步。
6. 监听的数据接受两个参数，第一个时最新的值，第二个是输入之前的值。
   总的来说就是，在页面中使用大量或者是复杂的表达式去处理数据，对页面的维护会有很大的影响，这个时候就需要用到computed计算属性来处理复杂的逻辑运算，computed一般是改变data或者props里面的值为自己用。当需要在数据变化时执行异步或开销较大的操作时，就使用watch。watch可以进行深度监听，监听1对象的变化。