---

MVVM、MVC、MVP的区别

MVC (Model-View-Controller)

• Model：负责应用程序的数据和业务逻辑。
• View：负责显示数据以及与用户交互。
• Controller：充当模型和视图之间的中介，处理用户输入并相应地更新模型和视图。

MVC 模式的特点是将应用程序分为三个部分，有利于代码的复用和分工，但可能导致 Controller 过于庞大，难以维护。

MVP (Model-View-Presenter)

• Model：同样负责应用程序的数据和业务逻辑。
• View：负责显示数据以及用户交互，但不直接处理用户输入。
• Presenter：作为 View 和 Model 之间的中介，处理用户输入并更新视图，同时也通过 Model 更新数据。

MVP 模式强调了对 View 和 Model 的解耦，使得 Presenter 可以更好地进行单元测试，但 Presenter 可能会变得过于庞大。

MVVM (Model-View-ViewModel)

• Model：同样负责应用程序的数据和业务逻辑。
• View：负责显示数据以及用户交互。
• ViewModel：连接 View 和 Model，负责处理视图的状态和行为，通常通过双向数据绑定来保持视图和数据的同步。

MVVM 模式引入了 ViewModel 层，利用数据绑定技术简化了视图和模型之间的同步，降低了 View 和 Model 的耦合度。这种模式在前端开发中比较流行，例如在 Vue.js 和 Knockout 等框架中被广泛应用。

总的来说，这些模式都旨在解决软件开发中的组织和维护问题，但它们在数据流向和组织结构上有所不同，开发者可以根据具体的需求和场景选择合适的模式。

Computed 和 Watch 的区别

Computed

• 特点：Computed属性支持缓存，只有依赖的数据发生变化时才会重新计算。
• 异步：不支持异步操作，当Computed中有异步操作时，无法监听数据的变化。
• 默认走缓存：computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
• 使用场景：如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed。

computed: {
  // 使用get方法，默认行为
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // 使用get和set方法
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(value) {
      const names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

Watch

• 特点：Watch不支持缓存，数据变化时立即触发相应的操作。
• 异步支持：支持异步监听。
• 参数：监听函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值。
• 使用场景：当想要执行异步或昂贵的操作以响应不断的变化时，就需要使用watch。

watch: {
  price(newValue, oldValue) {
    // Do something when price changes
  }
}

总结

• computed 计算属性：用于派生数据，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
• watch 侦听器：更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景

Computed

• 适用情况：当需要进行数值计算，并且这些计算依赖于其他数据时，使用computed是最佳选择。由于computed具有缓存特性，它可以避免每次获取值时都要重新计算，从而提高性能。例如，计算总价、过滤列表等操作都适合使用computed属性。

computed: {
  totalPrice() {
    return this.price * this.quantity;
  }
}

Watch

• 适用情况：当需要在数据变化时执行异步或者开销较大的操作时，应该使用watch。Watch选项允许执行异步操作（比如访问一个 API），并且可以限制执行该操作的频率。此外，在得到最终结果前，设置中间状态也是watch所擅长的。这些都是计算属性无法做到的。

watch: {
  // 监听数据变化，执行异步或开销较大的操作
  dataToWatch(newValue, oldValue) {
    // Execute asynchronous or expensive operation
  }
}

通过以上场景说明，可以更清晰地了解在何种情况下应该使用computed和watch，以便根据实际需求做出正确的选择。

总结：Computed属性是用于基于依赖数据的计算，并具有缓存特性，避免重复计算。Watch则用于监听数据变化执行特定操作，适合处理异步或耗时任务，无缓存。Computed是为了派生新数据，而Watch是为了对数据变化做出反应。

Computed 和 Methods 的区别

Computed

• 特点：Computed属性是基于它所依赖的数据进行缓存的。只有当依赖的数据发生改变时，才会重新求值。
• 用途：适合用于衍生出一些新的数据，或者对已有数据做一些处理后得到新的数据。

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Methods

• 特点：Methods包含需要在模板中调用的函数。每次重新渲染时都会执行。
• 用途：适合包含需要在事件处理函数中执行的逻辑或者进行复杂的计算。

methods: {
  greet() {
    return `Hello, ${this.fullName()}`;
  }
}

区别

1. 缓存：Computed属性有缓存机制，只有相关依赖发生改变时才会重新计算；而Methods中的函数每次调用时都会执行。
2. 用途：Computed适合用于派生数据的计算，而Methods适合包含需要在事件处理函数中执行的逻辑或者进行复杂的计算。

总的来说，Computed用于派生数据，而Methods包含需要在模板中调用的函数，每次重新渲染时都会执行。 Developers可以根据具体需求在Vue.js应用程序中选择合适的方式。

持续学习总结记录中，回顾一下上面的内容：
1. MVVM、MVC、MVP的区别：这三者都是前端架构模式，MVVM（Model-View-ViewModel）强调数据驱动视图，ViewModel负责处理业务逻辑和数据操作；MVC（Model-View-Controller）将应用分为三个部分，Model负责数据，View负责显示，Controller负责业务逻辑；MVP（Model-View-Presenter）是MVC的变种，Presenter取代了Controller，View和Model之间的交互更加直接。
2. Computed 和 Watch 的区别：Computed是计算属性，它依赖于其他属性的值，并且当这些属性的值发生变化时，它会自动更新；Watch是侦听器，它用于监听某个属性的变化，当这个属性的值发生变化时，它会执行一些操作。
3. Computed 和 Methods 的区别：Computed是计算属性，它只有在它的依赖项发生变化时才会重新计算，然后缓存这个计算结果；Methods是方法，它每次都会重新计算，不会缓存计算结果。