选项式 API (Options API)

在 Vue 2 中引入并继续在 Vue 3 中支持的选项式 API，是一种通过声明式选项（如 data, methods, computed, watch, props, lifecycle hooks 等）来组织组件逻辑的方式。

数据和方法: 通过 data 返回一个对象来定义组件的状态，通过 methods 定义组件的方法。
计算属性和侦听器: 通过 computed 定义计算属性，通过 watch 监听响应式数据的变化。
生命周期钩子: 如 created, mounted, updated, destroyed 等，用于在组件的不同生命周期阶段执行代码。
模板: 使用声明式的 HTML-like 语法定义 UI

<template>
  <button @click="increment">Count is: {{ count }}</button>
  //元素绑定了一个点击事件处理器 (@click)，当按钮被点击时，会调用 increment 方法
</template>

<script>
export default {
  // data() 函数返回一个对象，该对象的属性是组件的状态，对象中的属性都是响应式的。这意味着，当这些属性的值改变时，Vue 会自动更新 DOM 以反映这些变化。名为 count 的状态属性，初始值为 0
  data() {
    return {
      count: 0
    }
  },

  // methods 定义了组件的方法，定义了一个 increment 方法，用于增加 count 的值
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用，在这个例子中，当组件挂载完成后，mounted 钩子会执行，并打印初始的 count 值到控制台
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

组合式 API (Composition API)

Vue 3 引入的组合式 API 提供了一种更灵活的方式来组织和重用组件逻辑。它主要围绕 setup 函数展开，这个函数在组件创建之前执行，是定义组件逻辑的地方。

响应式引用: 使用 ref 代替了data。【从后端接受的数据，在定义ref的时候，根据返回值来定义，包括‘’，[],null】
计算属性和侦听器: 使用 computed 和 watch，与选项式 API 类似，但用法更灵活。
生命周期钩子: 使用 onMounted, onUpdated, onUnmounted 等函数，这些与选项式 API 中的生命周期钩子等效，但用法不同。
逻辑重用和抽象: 可以将相关的逻辑组合在一起，易于重用和测试。通过自定义的“组合函数”（composition functions），你可以跨组件重用逻辑

响应式

<template>
    <div id="counter"> <!-- 组件根元素通常不需要 id，除非你需要它来进行 DOM 操作 -->
      <h1>Counter Example</h1>
      <p>{{ name }}</p>
      <p>{{ age }}</p>
    </div>
</template>


vue2
<script>
export default {
name: 'Counter',  //定义组件的名字， 
data() {  //返回一个对象，包含组件的响应式数据
    return {
    name: 'mxx', // 假设这是一个名字，所以它应该是字符串
    age: 19     // 年龄通常是数字
    }
}
}
</script>

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

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

在 Vue 3 中，使用 ref 和直接声明一个常量（如 const age = 19;）有一些关键区别：

响应性（Reactivity）:
- const age = ref(19);：使用 ref 创建的变量是响应式的。这意味着当 age 的值改变时，任何使用这个变量的 Vue 模板或计算属性都会自动更新。ref 返回一个包含 .value 属性的响应式对象，你需要通过 age.value 来访问或修改这个值。
- const age = 19;：这是一个普通的 JavaScript 常量，它不是响应式的。如果你更改了 age 的值，Vue 模板不会自动更新以反映这一变化。
使用场景:
- 使用 ref 通常是为了保持数据的响应性，特别是当你需要在组件的多个地方更新或追踪这个数据时。
- 如果你的数据在组件的整个生命周期内都不会改变，或者你不需要追踪其变化，那么直接使用常量会更简单。不必使用ref
模板访问:
- 使用 ref：在模板中直接使用 age 在JavaScript里 age.value。
- 使用常量：在模板中直接使用 age。

变化

使用函数

不用methods了。直接用箭头函数

this

不在使用了

使用`setup()`

语法简洁性:
- <script setup>: 提供了一种更简洁的语法。在这种模式下，你可以直接编写组件的逻辑，而不需要包裹在 setup 函数或导出对象中。这种方式减少了样板代码，使得组件更简洁。
- <script>: 使用传统的 Vue 组件格式。在这种方式下，组件的所有选项（如 data, methods, computed 等）都包裹在导出的对象中。
顶层变量作为响应式数据:
- <script setup>: 这种模式自动将所有顶层的变量视为组件的响应式数据或方法，无需定义在 data 或 methods 选项中。
- <script>: 需要明确地在 data, methods, computed 等选项中定义响应式数据和方法。
模板引用:
- <script setup>: 允许你直接在模板中使用定义的变量，无需声明 return。
- <script>: 你必须在 setup 函数中返回一个对象，这个对象的属性和方法才能在模板中被使用。

posted on 2024-01-05 00:14 黑逍逍阅读(79) 评论(0) 收藏举报

刷新页面返回顶部

选项式 API (Options API)

组合式 API (Composition API)

响应式

变化

使用函数

this

使用setup()

公告

使用`setup()`