# vue3
新版本全家桶：vue3.2+vue-router@4.x+pinia+vite2+TypeScript+axios
# vue中provide和inject 用法
成对出现：provide和inject是成对出现的
作用：用于父组件向子孙组件传递数据
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
inject() can only be used inside setup() or functional components.
- 这是允许的，因为console.log是setup()生命周期里的同步代码
function xx() {
console.log(inject("abc"))
}
xx()
1
2
3
4
2
3
4
- 让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样
- 放在Promise.then()也是禁止的，比如
Promise.resolve().then(() => {
console.log(inject("abc"))
})
1
2
3
2
3
# Vue 中 强制组件重新渲染的正确方法
TIP
强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。
- 简单粗暴的方式：重新加载整个页面
- 不妥的方式：使用 v-if
- 较好的方法：使用Vue的内置forceUpdate方法
- 最好的方法：在组件上进行 key 更改