Vue3新特性——CompositionAPI详解⽂章⽬录
⼀、 Vue3快速⼊门
1. Vue3 带来了什么
1. 性能的提升
打包和渲染更快
内存更少
2. 源码的升级
使⽤Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和tree-Shaking
3. 更好的⽀持TypeScript
4. 新的特性
（1）Composition API（组合式API）
setup配置
ref与active
watch与watchEffect
provide与inject
。。。。。。
（2）新的内置组件
Fragment
Teleport
Suspense
（3）其它改变
新的⽣命周期钩⼦
data选项始终被声明为⼀个函数
移除keyCode⽀持为v-on的修饰符
2. Vue3⼯程的创建
2.1 使⽤vue-cli创建
安装@vue/cli，确保vue-cli版本在4.5.0以上
cnpm install -g @vue/cli
升级@vue/cli
npm update -g @vue/cli
查看@vue/cli版本
vue --version
创建vue项⽬
d create 项⽬名
注：这样输⼊是为了解决git bash中上下箭头不能使⽤的问题。如果不需要⾃定义则可以输⼊“vue create 项⽬名”
启动项⽬
npm run serve
2.2 使⽤vite创建
2.2.1 是什么
vite是新⼀代前端构建⼯具（webpack之后的）
2.2.2 vite的优势
开发环境中，vite⽆需打包，可快速的冷启动
轻量快速的热重载（HMR）
真正的按需编译，不需要等待整个应⽤编译完成
2.2.3 使⽤步骤
1. 创建⼯程
npm 6.x
cnpm init vite@latest --template vue npm 7+
cnpm init vite@latest – --template vue 或者
npm init vite-app 项⽬名称
2. 进⼊项⽬⽬录
cd < project-name>
3. 安装依赖
npm install
4. 运⾏项⽬
npm run dev
3. vue3项⽬结构的分析
3.1 vue-cli 项⽬结构
1. main.js
// 不再引⼊Vue构造函数，引⼊的是名为createApp的⼯⼚函数，⽆需通过new调⽤
import{ createApp }from'vue'
// 引⼊根组件
import App from'./App.vue'
// createApp(App)：创建应⽤实例对象——app（类似于vue2中的vm，但app⽐vm更“轻”，即app没有vm那么多的⽅法属性等）const app =createApp(App)
// 挂载
// createApp(App).mount('#app')
2. vue3的模板结构中可以没有根节点
4. vue3中的开发者⼯具
4.1 在线安装
打开⾕歌⽹上应⽤商店，搜索vue选择对应的版本
4.2 离线安装
1. 下载⼯具
2. 打开⾕歌扩展程序，将下载的 .crx ⼯具拖⼊扩展程序
⼆、常⽤Composition API
组合API都是函数，再使⽤时需要先引⼊（setup不需要引⼊）
1. setup
1. 是vue3的⼀个新配置项，值是⼀个函数
git使用详解2. 执⾏时间：在beforeCreate之前，即组件创建之前
3. setup中不能⽤this，此时this还不是组件实例
export default{
name:'App',
setup(){
console.log(this)
},
beforeCreate(){
console.log('beforeCreate')
},
}
4. setup的参数
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
context：上下⽂对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发⾃定义事件的函数, 相当于 this.$emit。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。