vue计算属性和监听器

1.计算属性概念（computed）： 计算属性是基于它们的依赖进⾏缓存的。只有当它们的依赖发⽣变化时，它们才会重新计算。计算属 性通常⽤于需要进⾏复杂计算的场景

2.监听器概念(watch)： 监听器⽤来监听特定数据的变化，并在数据变化时执⾏相应的操作。监听器通常⽤于需要执⾏异步或 开销较⼤的操作的场景。

3.计算属性和监听器实现原理： Vue的计算属性和监听器都是基于Vue的响应式系统实现的。

Vue的响应式系统是通过Object.defineProperty()来实现的，它会在组件实例化时，对数据对 象进⾏递归遍历，对每个属性都通过Object.defineProperty()进⾏劫持，当数据发⽣变化时，会 触发对应的getter和setter⽅法，从⽽实现对数据的监听和响应。

在计算属性的实现中，Vue会在组件实例化时，对计算属性进⾏缓存，只有当计算属性的依赖发⽣变 化时，才会重新计算计算属性的值。这样可以避免重复计算，提⾼性能。

在监听器的实现中，Vue会在组件实例化时，通过watch()⽅法来监听数据的变化，并在数据变化时 执⾏相应的回调函数。 总的来说，Vue的计算属性和监听器都是基于Vue的响应式系统实现的，通过对数据进⾏劫持和监 听，实现对数据的响应。

4.⼆者区别：

4.1计算属性是基于它们的依赖进⾏缓存的，只有当它们的依赖发⽣变化时，它们才会重新计算；⽽ 监听器可以监听指定数据的变化，并在数据变化时执⾏相应的操作。

4.2计算属性通常⽤于需要进⾏复杂计算的场景，⽐如格式化⽇期、处理字符串等等；⽽监听器通常 ⽤于需要执⾏异步或开销较⼤的操作的场景。

4.3计算属性是声明式的，它们的返回值会⾃动绑定到模板中的表达式上；⽽监听器是命令式的，需 要⼿动调⽤执⾏相应的操作。

4.4计算属性可以依赖多个数据属性，只要其中任何⼀个数据属性发⽣变化，计算属性就会重新计 算；⽽监听器只能监听指定的数据属性。

4.5计算属性的返回值会被缓存，只有在它的依赖发⽣变化时才会重新计算；⽽监听器的回调函数每 次都会被执⾏，⽆论数据是否发⽣变化。

5.⼆者应⽤场景：

5.1计算属性： -对数据进⾏格式化或处理：⽐如将⽇期格式化为指定的格式、将字符串转换为⼤写或⼩写等 等。 -对多个数据进⾏关联计算：⽐如计算两个数的和、计算两个⽇期之间的天数等等。 -对数据进⾏过滤或排序：⽐如对列表数据进⾏过滤、按照指定字段进⾏排序等等。 -对数据进⾏复杂计算：⽐如计算商品的总价、计算购物⻋中的商品数量等等。

5.2监听器： -监听数据变化并执⾏异步操作：⽐如监听⽤户输⼊的搜索关键字，然后调⽤接⼝进⾏搜索。 -监听数据变化并执⾏开销较⼤的操作：⽐如监听窗⼝⼤⼩变化，然后重新计算⻚⾯布局。 -监听数据变化并触发动画效果：⽐如监听滚动事件，然后触发滚动动画。 -监听数据变化并触发其他操作：⽐如监听⽤户登录状态，然后跳转到指定⻚⾯。