《Vue3 八》从 Options API 到 Composition API

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 模板中的数据。

1. props：父组件传递过来的属性。
2. 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>

定义响应式的数据。

1. 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>
   

2. 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