Vue学习之---computed计算属性中你不曾注意到的小细节

Vue学习之—computed计算属性

1.当写computed属性的时候要注意

• 所有的计算属性，都要定义在computed 属性中；

• 计算属性在定义的时候，要定义成方法的形式，而且定义成方法的形式后，方法中一定要有返回值，因为使用计算属性最终要得到的就是返回的值；

• 计算属性最终会变成当前的Vue实例对象的属性；

2.computed属性的两种形式

• 2.1函数形式的计算属性

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 这种形式的计算属性只能够读取
    property1: function () {
      return this.a * 2
    }
    
    // 简写形式
    property1(){
	  return this.a * 2
	}
  }
})
vm.property1   // => 4

注意：这里有一个小细节是很容易被忽视的

如果你为一个计算属性使用了 箭头函数 ，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为计算属性函数的第一个参数来访问。

var app = new Vue({
	data{ a = 2 },
	computed:{
		arrowFun:(vm) => {
			return vm.a *= 2
		}
	}
})

vm.arrowFun // 4

• 2.2对象形式的计算属性

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 对象形式的计算属性可读写
    property2: {
      get: function () {
        return this.a + 1
      },
      // val的值就是当这个计算属性发生改变时，赋予这个计算属性的值
      set: function (val) {
        this.a = val - 1
      }
    }
  }
})
vm.property2 // => 2
vm.propert2 = 3
vm.a       // => 2

3.使用computed属性的好处

• 好处1：实现了代码的复用；

• 好处2：只要计算属性中依赖的数据源变化了，则计算属性会重新求值；