Vue3.x 超详细安装教程
npm 或 yarn 安装
查看版本（是否安装成功）：
进入demo目录： cd G:\demo\
创建 my-project 项目： vue create my-project
选择自己所要集成的配置（格键是选中与取消，A键是全选，回车确定）
这里我的选择如下：
配置项：
安装的 vue-cli 将会是基于 vue3.x 版本
如果在项目中想要保持使用 TypeScript 的 class 风格的话，建议大家选择y。
这里我选择： Sass/SCSS（with node-sass）
这里我选择： ESLint with error prevention only
这里我选择： Lint on save
这里我选择： In dedicated config files
cd my-project ( 进入项目根目录 )
yarn serve ( 启动项目 )
现在的目录是 Vue3.x 的 cli 看上去简洁多了，去掉了 Vue2.x 中 build 和 config 等目录
在项目的根目录下新建 vue.config.js 文件（ 是根目录，不是src目录 ）
Vue3教程 1.Vue3的安装
Vue3 官方给出了两种安装方式，一种是用脚手架安装，一种是vite。以下是安装时需要注意，可能会影响你安装失败：
1.node版本太旧了，或者要清除安装的缓存
2.yarn, cnpm是否安装更新
3.网络不好，推荐使用淘宝镜像
卸载之前Vue 2的脚手架
全局安装最新版本的Vue Cli
创建Vue3项目
根据选项来创建你的项目
根据提示依此敲入如下命令
运行成功如下图
页面展示
助你上手Vue3全家桶之Vue3教程
这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实 V2 到 V3 的学习成本不高，熟悉 V2 的话，看完这篇文章就可以上手 V3 。
Vue3官网
在线源码编译地址
setup 是所有 Composition API 的容器，值为一个函数。组件中所用到的数据、方法等等，均要配置在 setup 中，它会在 beforeCreate 之前执行一次，注意： V3 里 this 不再是指向 Vue 实例，访问 this 会是 undefined
尽量不要与V2配置混用
V2 配置（ data 、 methos 、 computed ...）中可以访问到 setup 中的属性、方法。
但在 setup 中不能访问到 V2 配置（ data 、 methods 、 computed ...）。
如果有重名, setup 优先。
setup不能是一个async函数
因为返回值不再 return 的对象, 而是 promise , 模板看不到 return 对象中的属性。（后期也可以返回一个 Promise 实例，但需要 Suspense 和异步组件的配合）
使用 ref 可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。
语法
定义一个对象类型的响应式数据，内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作
语法
与 V2 中 computed 配置功能一致
语法
与 V2 中 watch 配置功能一致，语法有点改动
语法
和 watch 的区别是， watch 既要指明监视的属性，也要指明监视的回调。而 watchEffect ，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，不用写返回值。
语法
生命周期全都写在 setup 中
创建一个 ref 对象，其 value 值指向另一个对象中的某个属性
语法
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref
语法
只处理对象最外层属性的响应式（浅响应式）。适用于：一个对象数据，结构比较深, 但变化时只是外层属性变化
语法
只处理基本数据类型的响应式, 不进行对象的响应式处理。适用于：一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换
语法
让一个响应式数据变为只读的（深只读），应用于不希望数据被修改时
语法
让一个响应式数据变为只读的（浅只读），应用于不希望数据被修改时
语法
将一个由reactive生成的响应式对象转为普通对象，对这个普通对象的所有操作，不会引起页面更新。
语法
标记一个对象，使其永远不会再成为响应式对象，有些值不应被设置为响应式的，例如复杂的第三方类库等，当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
语法
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
语法
实现祖与后代组件间通信，父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
语法
检查一个值是否为一个 ref 对象
语法
检查一个值是否为一个 isReactive 对象
语法
检查一个对象是否是由 readonly 创建的只读代理
语法
检查对象是否是由 reactive 或 readonly 创建的 proxy
语法
Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML ，而不必求助于全局状态或将其拆分为两个组件。
语法
等待异步组件时先渲染一些额外内容，让应用有更好的用户体验
语法
将全局的API，即：Vue.xxx调整到应用实例（app）上
由于 V3 中不在存在 this ，所以 ref 的获取调整了
语法
V3 中在 for 循环元素上绑定 ref 将不再自动创建 $ref 数组。要从单个绑定获取多个 ref ，请将 ref 绑定到一个更灵活的函数上
语法
定义一个组件可以向其父组件触发的事件
使用方式修改
通过事件来监听组件生命周期中的关键阶段
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；
END
往期文章
个人主页