vue书写风格API

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

vue2只支持选项式 API 

vue3支持两种

 

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

?

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 26

<template>   <button @click="increment">Count is: {{ count }}</button><br>  //元素绑定了一个点击事件处理器 (<code>@click</code>)，当按钮被点击时，会调用 <code>increment</code> 方法 </template>   <script> export default {   // data() 函数返回一个对象，该对象的属性是组件的状态，对象中的属性都是响应式的。这意味着，当这些属性的值改变时，Vue 会自动更新 DOM 以反映这些变化。名为 <code>count</code> 的状态属性，初始值为 <code>0</code>   data() {     return {       count: 0     }   },     // methods 定义了组件的方法，定义了一个 <code>increment</code> 方法，用于增加 <code>count</code> 的值   methods: {     increment() {       this.count++     }   },     // 生命周期钩子会在组件生命周期的各个不同阶段被调用，在这个例子中，当组件挂载完成后，<code>mounted</code> 钩子会执行，并打印初始的 <code>count</code> 值到控制台   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），你可以跨组件重用逻辑

响应式

?

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 26 27 28 29

<template>     <div id="counter"> <!-- 组件根元素通常不需要 id，除非你需要它来进行 DOM 操作 -->       <h1>Counter Example</h1>       <p>{{ name }}</p>       <p>{{ age }}</p>     </div><br></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;）有一些关键区别：

1. 响应性（Reactivity）:

   • const age = ref(19);：使用 ref 创建的变量是响应式的。这意味着当 age 的值改变时，任何使用这个变量的 Vue 模板或计算属性都会自动更新。ref 返回一个包含 .value 属性的响应式对象，你需要通过 age.value 来访问或修改这个值。
   • const age = 19;：这是一个普通的 JavaScript 常量，它不是响应式的。如果你更改了 age 的值，Vue 模板不会自动更新以反映这一变化。

2. 使用场景:

   • 使用 ref 通常是为了保持数据的响应性，特别是当你需要在组件的多个地方更新或追踪这个数据时。
   • 如果你的数据在组件的整个生命周期内都不会改变，或者你不需要追踪其变化，那么直接使用常量会更简单。不必使用ref

3. 模板访问:

   • 使用 ref：在模板中直接使用 age 在JavaScript里 age.value。
   • 使用常量：在模板中直接使用 age。

 

变化

使用函数

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

this

不在使用了

使用setup()

 

1. 语法简洁性:

   • <script setup>: 提供了一种更简洁的语法。在这种模式下，你可以直接编写组件的逻辑，而不需要包裹在 setup 函数或导出对象中。这种方式减少了样板代码，使得组件更简洁。
   • <script>: 使用传统的 Vue 组件格式。在这种方式下，组件的所有选项（如 data, methods, computed 等）都包裹在导出的对象中。

2. 顶层变量作为响应式数据:

   • <script setup>: 这种模式自动将所有顶层的变量视为组件的响应式数据或方法，无需定义在 data 或 methods 选项中。
   • <script>: 需要明确地在 data, methods, computed 等选项中定义响应式数据和方法。

3. 模板引用:

   • <script setup>: 允许你直接在模板中使用定义的变量，无需声明 return。
   • <script>: 你必须在 setup 函数中返回一个对象，这个对象的属性和方法才能在模板中被使用。