概述

vue3.0用组合式api的写法代替原来据于“选项式 API (Options API)”的写法，本质上目的就是解决原来在写data,methods,create,mount等中写代码，造成代码无法公用等问题的痛点，让处理逻辑的代码归整在一起，从而让代码公用性提升。

例子

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
<script setup>
  import { ref，reactive, onMounted } from 'vue'

  // 响应式状态
  //ref用来定义基本类型的响应式状态即变量，例如string、number 和 boolean,当然也可以是对象类型
  const count = ref(0)
  // reactive用来定义具有响应式的对象类型（例如：对象、数组和 Map、Set 这样的集合类型）
  const state = reactive({ count2: 0 })

  // 用来修改状态、触发更新的函数
  function increment() {
     count.value++
  }

  // 生命周期钩子
  onMounted(() => {
     console.log(`The initial count is ${count.value}.`)
  })
</script>

例子的解释

核心是采用<sript setup>的定义，代替了原来的data,methods,create,mount写法，注意重点理解官方文档中的几句描述：

1.<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。 理解：导入、变量、函数这三个词。

入的 API 函数来描述组件逻辑。 理解：意味着代码可以作为纯函数的单文件的存在，采用typescript来写这个业务逻辑。
在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理。 理解：为了代码的美观性把js放在template后面。script setup其实就是vue组件的生命周期内置函数beforeCreate之前时会去执行。
学会ref，reactive的用法场景，以及他们的不同。详看上面代码中注释说明，这个其实就是类似原来的data中如何定义响应式的变量，这个变量可能是基本数据类型，也可能是对象类型。 在用ref和reactive定义时，有一个const和let的区别，有一个重要概念：响应式链接的丢失。

若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API： nextTick的用法，也注意一下。

vue3.0 学习一：组合式 API (Composition API)

概述

例子

例子的解释