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
<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;）有一些关键区别：

  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 函数中返回一个对象，这个对象的属性和方法才能在模板中被使用。

 

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