【Vue3.0】

提示：继续深入了解Vue3.0内容

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：Vue.js是一款流行的JavaScript前端框架。Vue.js的2.0版本于2016年发布，自从发布以来，Vue.js在前端开发人员中受到了广泛的欢迎和应用。由于Vue.js在易用性、性能和可组合性等方面的优势，Vue.js在大型企业应用程序和个人项目中都得到了广泛的应用。

Vue.js 3.0是Vue.js的最新版本，它于2020年9月发布。相比于2.0版本，Vue.js 3.0具有更高的性能和更好的易用性。Vue.js 3.0还提供了一些新特性，包括响应式API、更好的TypeScript支持和更好的组合API支持，这使得Vue.js 3.0成为一个更强大的前端框架。此外，Vue.js 3.0还采用了新的组件注入API、静态渲染器和Composition API，使得Vue.js的开发变得更加高效、便捷和灵活。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Setup？

示例：可以定义data和methods，但是在vue3 推荐setup 函数

• setup 是一个函数，只在初始化时执行一次（代码在setup中写）
• 返回一个对象，对象中的属性或方法，模板中可以直接使用
• setup返回的数据会和data和methods进行合并，setup优先级更高
• setup 函数中无this（vue3中不写this）
• setup 不写async 函数（因为setup返回的是json对象，如果setup是一个async函数，那组件返回的是一个promise，如果setup是一个async函数，那组件是一个异步组件，需配合suspense组件）

二、Composition API

componsition api 是vue 3 中重要的特性之一，使用组合函数可以将组件逻辑分解为可重用的、自包含的函数。

代码如下（示例）：

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
}

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}
</script>

在上述代码中，我们在 useCounter 函数中定义了响应式变量 count 和函数 increment，然后在组件中使用 useCounter 函数，将 count 和 increment 返回给组件。