1、项目创建
支持两种方式：vuecli和vite。前者不在细说。提供vite的创建方法：
npm init vite-app vue3-demo
cd vue3-demo
npm install && npm run dev可以看到，构建几乎是秒开。vite之所以构建迅速就是因为它和webpack走了相反的道路，如下图：
很显然，vite一上来直接就把server准备好了，然后异步引入，你需要什么就引入什么，所以速度上占了优势。
2、组合api
目前vue3在写法上还是兼容vue2的，options API（data， computed，methods）还是可以写入组件，但是新增的组合api却应该更令人关注。
2.1、setup函数
setup函数就是组合api们大展身手的舞台了。所有相关的数据、方法全部写在里边。举个例子
export default {
name: 'app',
setup () {
// 定义一个数据,注意这个数据不是响应式的
let num = 100;
function changNum () {
num = 1000
}
return {
num,
changeNum
}
}
}这里需要注意的就是以下两点：
1、setup的执行时机是在beforeCreate和created之间，所以没有this。
2、setup中定义的方法和数据都要return出去，才能在模板中使用，否则无效。
setup函数有个两个参数 - props和context。
第一个props，不再多说，就是父级传递过来的数据。
第二个context，字面意思是上下文。他里边主要包含了三个东西：attrs，slots，emits。
attrs这个东西就是vue2中$attrs，俗称“捡漏之王”。只要是传递过来的数据，不在props中，就会在attrs中。这个很好理解。
slots这个就是插槽。所有的slot都存在这里。
emits对应的就是$emit。
很好理解，可以自己打印出来多试试。
2.2、响应式数据的创建 - ref和reactive
vue2中创建一个响应式的数据，直接写在data中就可以。但是在vue3中创建响应式数据，就必须引入组合api -- ref和reactive了。
这两个api都是创建响应式数据，他们之间有什么不同？
简单来说，ref创建基本数据类型的数据，reactive创建引用数据类型的数据。举个例子：
// 注意使用组合api比如显性引入 不能直接使用
import {ref, reactive} from 'vue'
export default {
name: 'app',
setup () {
let num = ref(0);
let person = reactive({
name: 'www',
age: 20,
from: {
country: {
province: 'xx'
}
}
})
// 注意 创建好的数据一定要return出去
return {num, person}
}
}
但是，这并不代表ref不能创建引用数据类型。只不过，ref创建的引用数据类型，底层走的还是reactive的方法。
那么reactive和ref的底层分别是什么？
vue2的响应式原理都是基于Object.defineProperty的。那么ref的响应式就是基于此，只有get和set，面对基本数据类型非常简单。但是对于负责的引用数据类型，就会使用proxy作为响应式映射。
两者区别，不在细说。
2.3、计算属性 - computed
同样的需要显性引入，然后传入一个函数，在函数中计算data，如下
import {computed} from 'vue'
export default {
name: 'app',
setup () {
let str = ref('hello');
let _str = computed(() => {
return str + 'world'
})
return {
str,
_str
}
}
}2.4、监控 - watch和watchEffect
数据的监控，基本用法还是和vue2类似，watch函数接收三个参数，第一个是监控的属性，第二个是一个函数，包含newval和oldval，第三个是配置项，比如immidate：true。举个例子：
这里需要注意，监控基本类型和引用类型的数据之间的写法是不同的。
import {
ref,
watch
} from 'index.js';
setup () {
// 基本类型的
let num = ref(0);
watch (num, (newVal, oldVal) => {
}, {
immidate: true
})
// 引用类型的
let person = {
name: 'www',
age: 30,
job: {
a: {
b: 'aaaa'
}
}
}
// 需要以函数的形式
watch (() => person.name, (newVal, oldVal) => {
}, {
immidate: true
})
}监控多个属性
A、监控基本类型的数据多个属性
和vue2不同的地方就是watch可以同时监控多个属性，以数组的形式传入参数，同样也会以数组的形式接收结果。
......
watch ([num1, num2], (newVal, oldVal) => {
console.log('watch -- val', newVal) // newVal -> [1, 2] 数组形式
}, {
immidate: true
});
......B、监控基本类型的数据多个属性
......
watch([() => person.name, () => person.age], (newVal, oldVal) => {
console.log('person.name, person.age', newVal, oldVal);
})
......还有个watchEffect。这个api不在指定具体的监控的某个属性。它内部的函数中出现了谁，就会去监控谁。举个例子
watchEffect(() => {
// 用到谁就监控谁
let num = firstname.value;
console.log('watchEffect ---')
})2.5、hooks
这个hooks可以看作vue2中的mixins。具体做法就是新建一个js文件，把需要提取的公共代码写入进去。举个例子
// 获取当前鼠标点击的坐标
// 提取这个公共功能模块
export default function () {
let point = reactive({
x: 0,
y: 0
})
function savePoint (event) {
point.x = event.pageX;
point.y = event.pageY;
}
onMounted(() => {
window.addEventListener('click', savePoint);
})
onBeforeUnmount(() => {
window.removeEventListener('click', savePoint);
})
return point
}
// 使用的时候直接引入即可
import usePoint from 'xxxx.js'
setup () {
let point = usePoint();
return {point}
}2.6、provide和inject
这个很vue2的用法几乎一样，只不过需要单独引入。举个例子
// 祖辈组件负责提供数据
import {
provide,
reactive
}
setup () {
let car = reactive({
name: 'bmw',
price: '40w'
})
provide('car', car)
return {
car
}
}
// 后代组件
import {
inject
} from 'vue'
setup () {
inject('car');
return {
car
}
}至此，习惯vue2开发的直接可以快速迁移到vue3，并且可以开始做一些功能了。上边这个几个api已经可以满足基本的开发需求了。
除此之外，还有一些黑科技需要提一下。
1、customRef
自定义ref。就是自己写get，set。实现一个自定义的响应式。举个例子，实现一个延迟的响应式
import {cutomRef} from 'vue'
let key = myRef('a'); // 自定义一个ref，它是一个函数
function myRef (value) {
let timer;
return customRef((track, trigger) => {
// cutomRef内部需要写入个人实现的逻辑，所以是一个函数，参数也是一个函数
return {
get () {
track();// track 是追踪变化，有了变化及时输出
return value;
},
set (newVal) {
clearTimeout(timer);
timer = setTimeout(() => {
value = newVal;
trigger();// trigger 是触发修改
}, 500);
}
}
})
}2、teleport组件
这是个内部组件，可以直接使用。它的目的就是把这个组件包裹起来的dom，转移到某一个dom元素下。比如，写在一个组件中的对话框，你可以把它直接以到body下。
<Teleport to="body">
<div></div>
</Teleport>
// 之后这个div的上级节点就会变成body暂时这么多吧，自己再项目中慢慢体会一下。
最后，需要了解vite+vue3+ts+setup+pinia的，请移步至我的另外一篇文章：