什么是组合式？什么是响应式？

大家好，欢迎来到IT知识分享网。

用Vue 2的语法来举例说明响应式和组合式的区别：

响应式示例

<template> <div>{ 
  { count }}</div> </template> <script> export default { 
      data() { 
      return { 
      count: 0 } }, mounted() { 
      setInterval(() => { 
      this.count++ }, 1000) } } </script> 

在上面的代码中，我们使用data选项定义了一个响应式数据count，并在mounted钩子函数中使用setInterval定时器来更新count的值。当count的值发生变化时，视图会自动更新。

组合式示例

<template> <div>{ 
  { doubleCount }}</div> </template> <script> import { 
      computed } from 'vue' export default { 
      data() { 
      return { 
      count: 0 } }, computed: { 
      doubleCount() { 
      return this.count * 2 } }, mounted() { 
      setInterval(() => { 
      this.count++ }, 1000) } } </script> 

在上面的代码中，我们同样使用data选项定义了一个响应式数据count，但是在computed选项中定义了一个计算属性doubleCount，它依赖于count的值。当count的值发生变化时，doubleCount会自动重新计算并返回新的值。在模板中，我们直接使用了doubleCount，而不需要手动计算它的值。

可以看到，在Vue 2中，虽然响应式API仍然可以满足大部分需求，但是组合式API提供了一种更加灵活和模块化的方式来组织和复用组件的逻辑。