《Vue3 八》从 Options API 到 Composition API

花铛

已于 2025-02-05 20:32:23 修改

阅读量349

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签： Vue3

于 2025-01-08 12:15:16 首次发布

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/144987406

Options API 兼容 Vue2，Composition API 是全新的。

一个 .vue 文件中是可以写两个 <script> 的，分别写 Options API 和 Composition API 的。

Options API 的弊端：

Options API 的一大特点就是在对应的属性选项中编写对应的功能模块，例如 data 中定义数据、methods 中定义方法，computed 中定义计算属性。当实现一个功能时，这个功能对应的代码逻辑就会被拆分到各个属性中，比较分散。

如果能够将同一个逻辑关注点相关的代码收集在一起会更好一点，这就是 Composition API。

setup 选项：

setup 选项：可以在 setup 选项中编写 Composition API 。setup 也是一个选项，本身是一个函数；接收两个参数，分别是 props 和 context；返回值是一个对象，包含需要绑定到 template 模板中的数据。

props：父组件传递过来的属性。
context：包含三个属性，分别是 attrs（所有非 props 的 attribute）、slots（父组件传递过来的插槽）、emit（使用它来让组件内部发出事件）。

setup 中不能使用 this。因为 this 没有指向组件实例，并且在 setup 被调用之前，data、computed、methods 等都没有被解析。

在 setup 选项中定义数据：

在 setup 中定义的数据，如果想要绑定到 template 模版中的话，需要手动返回。

定义普通的数据。

<template>
  <!-- 3. 使用普通数据 -->
  <div>{
  
  { count }}</div>
  <button @click="handleAdd">+1</button>
</template>

<script>
export default {
  setup() {
    // 1. 定义普通数据。定义普通的数据也可以被使用，但是不是响应式的，如果对其进行修改，数据会改变，但是视图不会更新
    let count = 0 
    const handleAdd = () => {
      count.value++ 
    }

    // 2. 返回普通数据。所有想要绑定到 template 模版中的数据都需要返回
    return {
      count,
      handleAdd,
    }
  }
}
</script>

<style scoped>
</style>

定义响应式的数据。

reactive()：只能用于定义复杂类型的数据，不能用于定义简单类型的数据，传入的必须是对象类型或者数组类型。

<template>
  <!-- 5. 使用响应式数据 -->
  <div>{
    
    { account.name }}</div>
  <div>{
    
    { account.password }}</div>
  <button @click="handleChange">修改</button>
</template>

<script>
// 1. 引入 reactive
import { reactive } from 'vue'

export default {
  setup() {
    // 2. 定义响应式数据。reactive 不能用于定义简单类型的数据，例如 let account = reactive(0)
    let account = reactive({
      name: 'Lee',
      password: 123456
    })
    // 3. 修改响应式数据
    const handleChange = () => {
      account.name = 'Mary'
    }

    // 4. 返回响应式数据。所有想要绑定到 template 模版中的数据都需要返回
    return {
      account,
      handleChange,
    }
  }
}
</script>

<style scoped>
</style>

ref()：主要用于定义简单类型的数据，但其实也可以定义复杂类型的数据。返回值是一个 ref 对象，内部的值是在 ref 对象的 value 属性中被维护的。在 template 模板中使用 ref 对象时，Vue 会自动对其进行解包，取出其中的 value；但是在 setup 内部使用 ref 对象时，依然是一个 ref 引用，所以在对其进行操作时需要使用 .value 的方式。

<template>
  <!-- 5. 使用响应式数据。在 template 模板中使用 ref 对象时，Vue 会自动对其进行解包，取出其中的 value -->
  <div>{
    
    { count }}</div>
  <button @click="handleChange">修改</button>
</template>

<script>
// 1. 引入 ref
import { ref } from 'vue'

export default {
  setup() {
    // 2. 定义响应式数据。ref() 返回的是一个 ref 对象
    let count = ref(0)
    // 3. 修改响应式数据。在 setup 内部使用 ref 对象时，依然是一个 ref 引用，所以在对其进行操作时需要使用 .value 的方式
    const handleChange = () => {
      count.value++ 
    }

    // 4. 返回响应式数据。所有想要绑定到 template 模版中的数据都需要返回
    return {
      count,
      handleChange,
    }
  }
}
</script>

<style scope