选项式，组合式，响应式

"选项式"（Options API）、"组合式"（Composition API）和"响应式"（Reactivity API）

是Vue中重要的API概念，它们定义了组件的结构和行为，以及如何管理状态和逻辑

选项式 API（Options API）

• 概念：选项式API是Vue最初提供的API，通过定义一个包含各种选项（如data, methods, props, computed, watch等）的对象来创建Vue组件。每个选项都有特定的用途，例如data用于定义组件的状态，methods用于定义组件方法等。
• 特点：易于上手，代码结构清晰。但在处理复杂组件时，相关的逻辑会散布在不同的选项中，使得维护和理解组件的功能变得更加困难。
• 通过定义一个包含data, methods, computed等属性的对象来创建组件。这里是一个简单的计数器组件示例

• <template>
    <div>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  };
  </script>
  

  　　

组合式 API（Composition API）

• 概念：组合式API是Vue 3中引入的新API，它提供了一种更灵活的方式来组织和复用逻辑。通过引入setup函数，开发者可以在一个地方集中处理组件的逻辑，使用ref和reactive等函数来创建响应式状态。
• 特点：使得组件的逻辑更加紧密和可复用，特别适合构建复杂组件。但它的学习曲线比选项式API更陡峭，需要对Vue的响应性原理有更深入的理解。

• <template>
    <div>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
  
  function increment() {
    count.value++;
  }
  </script>
  

  　　

• <template>
    <div>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
  
      function increment() {
        count.value++;
      }
  
      return {
        count,
        increment,
      };
    },
  };
  </script>
  

  　　

响应式 API（Reactivity API）

• 概念：响应式系统基本上是一种自动更新机制，让你的应用界面能够响应数据变化。当你的应用状态变化时，视图会自动更新以反映最新的状态，无需你手动操作DOM。
• Vue 2中也有响应式系统，但它的实现方式与Vue 3有所不同。Vue 2的响应式系统基于Object.defineProperty来实现，而Vue 3使用了更现代的ProxyAPI来重新设计和实现响应式系统，提供了更好的性能和更灵活的响应式能力
• 特点：这些API可以在组合式API中使用，也可以在其他场合独立使用，为Vue应用提供了强大的状态管理和数据绑定能力。
• 举例：假设你有一个响应式变量count，和一个按钮，每当按钮被点击，count的值增加。在Vue中，你不需要写代码来找到显示count值的DOM元素并更新它；你只需要更新count的值，Vue的响应式系统会自动完成剩下的工作。
• API：

  • ref: 用于定义一个响应式的引用类型，适用于基本数据类型。使用时通过.value访问其内部值。

  • reactive: 用于定义一个响应式的复杂类型，如对象或数组。操作这个响应式对象就像操作普通对象一样，Vue会自动跟踪其变化。

• 和非响应式的区别

  • 不使用ref定义响应式变量

    当你直接定义变量，如const name = 'mx'; const age = 19;，这些变量是非响应式的。这意味着如果这些变量的值在组件的生命周期中发生变化，模板不会自动更新来反映这些变化。这种方式适合定义不需要响应式更新的静态数据。

    

     在模板中使用这些变量时，它们的初始值会被显示，但如果后续这些值发生变化（假设有方法或生命周期钩子更新了它们），视图不会更新来反映这些变化。

  • 使用ref定义响应式变量

    使用ref定义的变量是响应式的。ref是一个函数，它接受一个参数（初始值），并返回一个响应式的引用对象。这个对象有一个.value属性，通过它你可以获取或设置原始值。当使用ref定义的变量的值发生变化时，任何依赖于这些变量的视图都会自动更新。

    

     在模板中引用ref定义的响应式变量时，不需要使用.value访问它们的值；Vue 模板编译器会自动处理。如果这些变量的值在组件的生命周期中发生变化，视图会自动更新来反映最新的值。

vue2: 

<template>
    <div id="counter"> <!-- 组件根元素通常不需要 id，除非你需要它来进行 DOM 操作 -->
      <h1>Counter Example</h1>
      <p>{{ name }}</p>
      <p>{{ age }}</p>
    </div>
  </template>
   
  <script>
  export default {
    name: 'Counter',  //定义组件的名字， 
    data() {  //返回一个对象，包含组件的响应式数据
      return {
        name: 'mxx', // 假设这是一个名字，所以它应该是字符串
        age: 19     // 年龄通常是数字
      }
    }
  }
  </script>
  
  <style>
  /* 可以在这里添加一些样式 */
  </style>
  

 

 vue3: 使用 ref() 函数来声明响应式状态，代替了data

<template>
  <div>
    <h1>Counter Example</h1>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('mx');
const age = ref(19);
</script>

<style>
/* 在这里添加样式 */
</style>