【Vue3】计算属性computed和监听属性watch

目录

一、Vue3和Vue2的区别

二、计算属性computed

三、监听属性watch

四、计算属性和监听属性的区别

---

一、Vue3和Vue2的区别

Vue3和Vue2有以下几个主要区别：

1. 响应式系统的改进：Vue3采用了Proxy作为响应式系统的核心，相比Vue2的Object.defineProperty实现，Proxy具有更好的性能和更丰富的拦截能力。这使得Vue3在响应式数据追踪、嵌套对象的监听和数组变化的处理等方面都有了显著的改进。

2. 组合式API：Vue3引入了组合式API，将组件的逻辑按照功能进行组合，解决了Vue2中复杂组件逻辑难以维护和复用的问题。通过使用setup函数，可以更灵活地组织组件的代码，并且提供了更好的类型推导和IDE支持。

3. 更好的性能：Vue3在编译器和运行时方面都做了优化，编译器生成的代码更加高效，运行时的性能也有所提升。同时，Vue3还引入了静态提升（Static Hoisting）和树摇（Tree Shaking）等优化策略，减小了打包后的文件体积。

4. TypeScript支持：Vue3对TypeScript的支持更加完善，包括提供了更好的类型推导和错误提示，支持使用Composition API编写类型安全的代码。

5. 更好的开发体验：Vue3引入了一些新的特性和API，如Fragments、Teleport、Suspense等，使得开发者可以更方便地处理一些常见的场景和交互需求。

由于Vue3相对于Vue2做了较大的改动，迁移到Vue3可能需要进行一些代码调整和重写。同时，一些Vue2的插件和库可能还不支持Vue3，需要等待相应的更新或替代方案。

二、计算属性computed

计算属性（computed）是Vue中一个非常常用的特性，它可以根据响应式数据的变化自动计算出结果并返回。通过计算属性，我们可以将复杂的逻辑计算抽离出来，使得模板代码更加简洁和可读性更好。

在Vue中，计算属性是在V