VUE学习第二周--计算属性computed

计算属性computed

computed的用途

模板内的表达式的设计初衷是用于简单运算。然而在模板中写太多逻辑代码会让模板过重（难以理解、冗长）且难以维护。对于复杂逻辑，应当使用计算属性。
Computed用来替代模板中较长的表达式，快速计算需要显示的数据。在其中如果有data中定义的数据发生改变，computed对应的数据也会发生改变。Methods可以实现类似的功能，但是methods只有被调用才会去计算最新的数据。
性能方面，computed是依赖缓存的，只有相关依赖发生改变了才需要重新计算比较节省性能。而methods不使用缓存，每次调用都会重新计算，如果不需要缓存的时候用methods比较合理。

实现方法

计算属性默认定义的是get方法，但是也可以定义个set方法来赋值。

computed:{
	name:{
		get:function(){
			return this.name;
		},
		set:function(nameValue){
			this.name = nameValue;
		}
	}
}

Vue提供了与AngularJS类似的侦听方法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
    }
  }
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

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

后者的写法更加简洁且易懂
参考：https://cn.vuejs.org/v2/guide/computed.html

侦听器watch

侦听器也有其存在的价值，当需要在数据变化时只需异步或者开销大的方法时，watch更加有用。官网的例子是输入框中输入数据时，调用请求接口，当用户结束输入后快速得到结果可以使用这个方法。