Vite 需要 Node.js 版本 >= 12.0.0
npm init vite@latest
yarn create vite
// 或者
# npm 6.x
npm init vite@latest 项目名称 --template vue
# npm 7+, 需要额外的双横线:
npm init vite@latest 项目名称 -- --template vue
# yarn
yarn create vite 项目名称 --template vue
以上命令,根据自己需要取一行即可。我用的是yarn create vite,没有yarn的可以安装一下
npm install -g yarn

2.xx 版本 v-for > v-if
3.xx 版本 v-if > v-for
key值应该放在标签中,不再放到子标签中
在vue2.x中
:key="'heading-' + item.id">...:key="'content-' + item.id">...
在vue3.xxx中
:key="item.id">
......
在v-for生成的节点中,如果配置了ref属性,vue3中已经不再默认保存到$refs数组中
在2.xxx中,this.$refs数组中可以获取到配置的ref节点
{{ item }}
在3.xx中,需要用给ref配置相应的函数来处理
import { onBeforeUpdate, onUpdated } from 'vue'
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
在2.xx中,我们可以通过 this.$children 来获取当前组件中直接引用的子组件, 在 3.x 中,$children 属性已被移除,且不再支持,如果你需要访问子组件实例,官方建议建议使用 $refs
$attrs 现在包含了所有传递给组件的属性,包括 class 和 style。
在2.xx时,$attrs中是不包含class和style的,在设置了 inheritAttrs: false 时,会出现副作用
子组件:
v-bind="$attrs" />
export default {
inheritAttrs: false
}
父组件:
id="my-id" class="my-class">
2.xx会生成以下 HTML
id="my-id" />
3.xx会生成以下 HTML
id="my-id" class="my-class" />
updated 有太多相似之处,因此它是多余的。请改用 updated。例子参考官方文档:Custom Directives | Vue 3 Migration Guide
1. 不在支持值为对象的写法,只能写为函数形式
2. 当来自组件的 data() 及其 mixin 或 extends 基类被合并时,合并操作现在将被浅层次地执行
从实例中完全移除了 $on、$off 和 $once 方法。$emit 仍然包含于现有的 API 中,因为它用于触发由父组件声明式添加的事件处理函数。
在 3.x 中,过滤器已移除,且不再支持。官方建议用方法调用或计算属性来替换它们。
全局过滤器,建议通过全局属性以让它能够被所有组件使用到。
请参考官方文档