选项式，组合式，响应式

"选项式"（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>

 

posted on 2024-01-01 21:21  黑逍逍  阅读(17)  评论(0)  编辑  收藏  举报