准备工作

升级脚手架

npm i @vue/cli -g

vue create 项目名称

composition api （组合API）概念

• 组合API
• 框架层面的
• 把 api 拆分成一个个 hook（钩子） → 最后组合起来形成 → Vue3.0 Composition API 框架设计模式

import { watch, ref, toRef, onMounted, computed } from 'vue';
// 在 setup 中使用 composition api

存在意义

setup 的存在，就是为了能够在其中使用 Composition API

⭐️ 调用时机

props 初始化完毕之后，beforeCreate 之前被调用

基本使用

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    return {
      count: 0
    }
  },
}
</script>

返回值

• return 一个对象，对象中的属性会被合并到 render 函数的上下文中供 template 使用
• return 一个 render 函数，可以渲染模板