5. vue 计算属性和侦听器

计算属性和侦听器

一、 计算属性 computed

在模板字符串{{}}中放入大多的逻辑会让模板过重且难以维护。可使用计算属性

1. 基本使用

<p>{{message}}</p>

data: {
	return {
		msg:"hello",		
	}
},
computed: {
	// 计算属性的getter
	message: ()=>{   //vm.message
		return "hello"+this.msg;
	}
}

2. 计算属性的setter(来自官网)

计算属性默认只有 getter，也可以自定义提供 setter

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

再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新

二、侦听属性/监视函数 watch

当需要在数据变化时执行异步或开销较大的操作时， 就可以使用watch 来响应数据的变化
专门用于监视一个变量的变化，并在变量值发生变化时自动执行的一个函数

data {
	return { 变量名:值 }
},
watch: {
 //变量名(newVal,oldVal){ } 可传值，也可以不传值
 变量名(){
 	// ....
 }
}

只要data的同名变量值发生改变，watch的同名监视函数就会自动执行。
每次修改访问器属性时，不但通知虚拟DOM树，还会通知watch中的同名监视函数

计算属性 VS 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性 VS 侦听属性

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。