一. 简介
· 2020年9月18日，Vue.js发布3.0版本
· 源码地址：github.com/vuejs/vue-n…
二. 与vue2对比：
1. 性能提升
· 初次渲染快, 更新渲染快 —— 快
· 打包大小减少 —— 小
· 内存大小减少 —— 轻
2. 源码升级
. 使用Proxy代替Object.defineProperty实现响应式
· 优化虚拟DOM及Diff算法
3. 拥抱Typescript
4. 新特性
. Composition API（组合API）
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
. 新的内置组件
- Fragment
- Teleport
- Suspense
. 其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符等
三. 创建Vue3.0工程
- 使用 vue-cli 创建
官方文档：cli.vuejs.org/zh/guide/cr…
// 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
// 安装或者升级你的@vue/cli
npm install -g @vue/cli
// 创建项目
vue create vue3_test
// 启动项目
cd vue3_test
npm run serve
2. 使用 vite 创建
官方文档：v3.cn.vuejs.org/guide/insta…
vite官网：vitejs.cn
// 创建工程
npm init vite-app <project-name>
// 进入工程目录
cd <project-name>
// 安装依赖
npm install
// 启动项目
npm run dev.
四. 常用 Composition API
官方文档：www.javascriptc.com/vue3js/api/…
1. 是一个处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数，此时this是undefined
2. 只能是同步的不能是异步的
3. 入参有两个
- props: 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
- context : 上下文对象, 包含attrs、slots、emit
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性
slots: 收到的插槽内容
emit: 分发自定义事件的函数
4. 数据、方法等等，均要配置在setup中
5. 有两种返回值
-
若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用
-
若返回一个渲染函数：则可以自定义渲染内容
import { h, ref, reactive } from 'vue'
export default { setup() { const readersNumber = ref(0) const book = reactive({ title: 'Vue 3 Guide' }) // 请注意，我们需要在这里显式地暴露ref值 return () => h('div', [readersNumber.value, book.title]) } }
