目录

2.1 计算属性computed

2.1.1什么是计算属性

2.1.2 只有getter方法的计算属性 

2.1.3 定义有getter和setter方法的计算属性

2.1.4 计算属性和methods的对比 

2.2 监听器属性watch

2.2.1 watch属性的用法

2.2.2 computed属性和watch属性的对比

---

2.1 计算属性computed

当Vue模板的插值表达式过长或逻辑过于复杂时，表达式将变得臃肿甚至难以阅读和维护，例如：{ { textData.split(',').reverse().splice(0, 1) }}。这里的表达式包含3个操作方法，并不是很清晰，这时可以使用计算属性解决。

2.1.1什么是计算属性

在Vue实例的computed选项中，定义一些属性（可使用this引用），这些属性称作“计算属性”。所有的计算属性都是以方法（函数）的形式定义，但仅当作属性来使用。

 现在我们看另外一个使用场景：如果有个变量c的数据，来源a和b，a和b修改，c也会跟着修改，这时候就可以用上计算属性computed

2.1.2 只有getter方法的计算属性 

 在一个计算属性中可以完成各种复杂的逻辑，包括运算、方法调用等，但最终必须返回一个结果。计算属性的结果还可以依赖于多个数据，只要其中任一数据发生变化，计算属性将重新执行，视图也会更新。

2.1.3 定义有getter和setter方法的计算属性

Vue的每一个计算属性都包含一个getter和一个setter方法，我们只是使用了计算属性的默认用法，即仅使用了getter方法来读取计算属性。当然，也可以使用计算属性的setter方法来修改其值。

现在我们修改下数据

2.1.4 计算属性和methods的对比 

可以在表达式中调用方法达到与计算属性同样的效果，我们可以看出计算属性是带缓存功能的，methods是没有缓存功能的，我们看下图fullname复制三次，但是fullname的get方法并没有打印三次

2.2 监听器属性watch

2.2.1 watch属性的用法

Vue通过watch选项提供监听数据属性的方法（方法名与属性名相同），来响应数据的变化。当被监视的数据发生变化时，触发watch中对应的处理方法。

使用watch属性监视data中question的变化（watch中需提供与question同名的方法）

案例一 监测简单数据

案例二 监听对象

 深度监听虽然可以监听到对象的变化，但是无法监听到具体的是哪个属性发生变化了。

案例三 监控单个对象

2.2.2 computed属性和watch属性的对比

• computed 监控的数据在 data 中没有声明
• computed 不支持异步，当 computed 中有异步操作时，无法监听数据的变化
• computed 具有缓存，页面重新渲染，值不变时，会直接返回之前的计算结果，不会重新计算
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般使用 computed
• computed 计算属性值是函数时，默认使用get方法。如果属性值是属性值时，属性有一个get和set方法，当数据发生变化时会调用set方法。
• ----------------------------------------------------------------------------------------------------------------

• 监测的数据必须在 data 中声明或 props 中数据
• 支持异步操作
• 没有缓存，页面重新渲染时，值不改变时也会执行
• 当一个属性值发生变化时，就需要执行相应的操作
• 监听数据发生变化时，会触发其他操作，函数有两个参数：
• immediate ：组件加载立即触发回调函数 deep：深度监听，主要针对复杂数据，如监听对象时，添加深度监听，任意的属性值改变都会触发。 注意：对象添加深度监听之后，输出的新旧值是一样的。

2.3 应用场景

当需要进行数值计算，并且依赖于其它数据时，应该使用 computed ，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

当需要在数据变化时执行异步操作或开销较大的操作时，应该使用 watch，computed 不支持异步。如果需要限制执行操作的频率，可借助 computed 作为中间状态。