Vue快速入门(四)——Vue3及组合式API(一)

一、认识Vue3

1. Vue2 选项式 API vs Vue3 组合式API

Vue2选项式API格式如下：

<script>
export default {
   
  data(){
   
    return {
   
      count:0
    }
  },
  methods:{
   
    addCount(){
   
      this.count++
    }
  }
}
</script>

Vue3组合式API格式如下：

<script setup>
import {
    ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>

通过对比可以看出，Vue2的变量要要集中写在data中，方法是要集中写在methods中的；而Vue3的编程代码更少，而且变量和方法是不需要写在特定的地方的，可以随意写在你想放的位置，你可以把有关联的变量和方法集中在一块，这样也非常方便维护哦。
由此可看出Vue3的特点：

• 代码量变少
• 分散式维护变成集中式维护，更易封装复用

2. Vue3的优势

二、使用create-vue搭建Vue3项目

1、认识create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite（下一代构建工具），为开发提供极速响应

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest

这一指令将会安装并执行 create-vue

项目创建完成后，项目的目录结构如下：

关键文件有：

1. vite.config.js - 项目的配置文件基于vite的配置
2. . package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
3. main.js - 入口文件createApp函数创建应用实例
4. . app.vue - 根组件 SFC单文件组件 script - template - style
   变化一：脚本script和模板template顺序调整
   变化二：模板template不再要求唯一根元素
   变化三：脚本script添加setup标识支持组合式API
   5.index.html - 单页入口 提供id为app的挂载

三、组合式API - setup选项

1. setup选项的写法和执行时机

setup选项的写法

<script>
  export default {
   
    setup(){
   
    },
    <