选项式，组合式，响应式

"选项式"（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等属性的对象来创建组件。这里是一个简单的计数器组件示例
• ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  <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的响应性原理有更深入的理解。
• ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <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>

  　　

• ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  <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: 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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>