Vue3基础+代码语法+例子大全（八）——组合式API

参考官网：​​​​​​Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

十一、组合式API

注意：组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

1、什么是组合式 API ？

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

• 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

• 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

• 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

组合式 API能够将同一个逻辑关注点相关代码收集在一起。

在 Vue 3 中，组合式 API 基本上都会配合 <script setup> 语法在单文件组件中使用。

2、组合式 API 基础

（1）setup 组件选项

新的 setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口。

注意：在 setup 中应避免使用 this，this 不会指向实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

下面举个例子：App.vue ：

<script>
  export default{
    // 组合式API
    setup(){
      // msg的逻辑代码
      let msg="hello";
      console.log(msg);
      function changeMsg(){
        msg='你好'
        console.log(msg) //可以看到数据不是响应式的
      }
      return{
        msg,
        changeMsg,
      }
    }
  }
</script>

<template>
  <div>
    <p>{
  {msg}}</p>
    <button @click="changeMsg">改变msg</button>
  </div>
</template>

由上图运行来看，点击按钮，控制台里面输出，但实际页面上的 msg 并没有变化，这说明用这种方法的数据不是响应式的。 

（2）带 ref 的响应式变量

可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用。

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。

例如：

<script>
  import {ref} from 'vue' //引入ref
  export default{
    // 组合式API
    setup(){
      //通过ref定义响应式变量
      // counter的逻辑代码
      const counter=ref(0)
      function changeCounter(){
        //ref()返回带有value属性的对象,所以这里需要加上‘.value’
        counter.value++
      }

      return{  //在return里面将数据暴露出去
        counter,
        changeCounter
      }
    }
  }
</script>

<template>
  <div>
    <!-- 模板会自动解析value值，因此这里不需要加上‘.value’ -->
    <p>{
  {counter}}</p&