【Vue】3-1、Vue 3 简介

一、Vue 3 的优势

Vue 2 Options API 的缺陷：

一个功能往往需要在不同的 vue 配置项中定义属性和方法，比较分散，需求简单还好，清晰明了；但是需求复杂之后，就会多出 watch，computed，inject，provide 等配置，这个.vue 文件也会逐渐增大，且一个 methods 中可能包含 10-20 个方法，你往往分不清哪个方法对应着哪个功能。  

Vue3 中的 Composition API 就是用来解决这个问题的：

通过组合的方式，把零散在各个data，methods的代码，重新组合，一个功能的代码都放在一起维护，并且这些代码可以单独拆分成函数

在 Vue3 Composition API 中，我们的组件代码根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）。这样做即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像 vue2 Options API 中一个功能所用到的API都是分散的，需要改动功能，到处找API的过程是很费劲的。

二、创建项目 

创建一个 Vue 项目：  

npm init vue@latest

三、项目目录 

• vite.config.js

  • 项目的配置文件【基于 Vite 的配置】

• package.json

  • 项目包文件批【核心依赖想变成了 Vue3.x 和 Vite】

• main.js

  • 入口文件【createApp 函数创建应用实例】

• app.vue

  • 根组件【SFC 单文件组件 script - template - style】

  • 变化一：脚本 script 和 模板 template 顺序调整

  • 变化二：模板 template 不再要求唯一根元素

  • 变化三：脚本 script 添加 setup 标识支持组合式 API

• index.html

  • 单页入口【根据 id 为 app 的挂载点】

一  叶  知  秋，奥  妙  玄  心