vite兼容
- require.context 替换成import.meta.globEager
- scss 全局注入，需要在vite.config.ts配置@use "sass:math"; @import "./src/amf/styles/variables.module.scss
- 静态资源无法require，必须使用import
css预编译处理语言
- 穿透css，必须使用 :v-deep(.className){};
- :export在vite中不支持，可以修改成.module.scss
element-plus组件库
- Icon 语法改为： <el-icon><edit /></el-icon> 或者直接使用svg<edit />
import { Search } from '@element-plus/icons'
<el-button type="primary" :icon="Search">Search</el-button>
- dialog visible改为v-model
- Time-picker format格式修改YYYY-MM-DD HH:mm:ss ;defaluName变更；pickeroptions变更成shortcuts
vue3区别点
- 响应式数据
- 3.0里Vue会使用带有getter和setter的处理程序遍历data的所有property并将其转换为proxy，proxy是一个包含另一个对象或函数并允许对其进行拦截的对象，返回的是对象本身，因此可以解决vue2里对象深层嵌套无法响应的问题。
- 通过ref和reactive创建响应式引用
- 组合式API
- setup函数
- 接收两个参数props、context
- props不能解构，如果需要，可以使用toRefs
- 执行setup时，组件实例尚未创建，因此不能访问data、methods等
- context对象包含attrs、slots、emit
- 在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
- v-for 中的 Ref 数组
setItemRef(el) {
this.itemRefs.push(el)
}
- 异步组件defineAsyncComponent
- vue3.0不再通过promise创建异步组件，而是通过defineAsyncComponent显式来定义，返回一个promise。
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// 不带选项的异步组件
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// 带选项的异步组件
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
})
- 自定义指令directive
- 生命周期修改为与组件生命周期类似（beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted）。
- Data 选项
- data不再接收纯object，唯一的声明方法为:
import { createApp } from 'vue'
createApp({
data() {
return {
apiKey: 'a1b2c3'
}
}
}).mount('#app')
- mixin或extend合并时，不再进行深度合并，只执行浅层次合并
- mixin 改为自定义hooks
- Events API
-
off 和 $once被废弃。
- filter
- 3.0移除filter，使用computed或method
- 片段
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
- 函数式组件
- 不再需要functional：true参数。
- 使用普通函数创建，加收两个参数：props和context。其中context包含组件的attrs、slots、emit。
- h改为vue全局导入
- attrs字段不再需要，所需要的属性直接平铺即可
- 示例
import { h } from 'vue'
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
import { createApp } from 'vue'
import MyApp from './MyApp.vue'
const app = createApp(MyApp)
app.mount('#app')
- config.ignoredElements替换为config.isCustomElement。
- 全局 API 只能作为 ES 模块构建的命名导出进行访问，nextTick、observable、version、compile、set、delete等。
import { nextTick } from 'vue'
const plugin = {
install: app => {
nextTick(() => {
// ...
})
}
}
- key
- v-if/v-else/v-for不再必须指定key，Vue会自动生成唯一的key。
- 按键修饰符
- KeyboardEvent.keyCode被废弃，因此3.0修饰符不再支持keycode和数字，可以使用修饰键的短横线大小写名称。
- Slot 统一
- 统一普通slot和作用域slot，引用slot时，他们被统一到$slots选项中。
- Teleport
- Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。
- 制定了teleport之后，即使子组件在不同的地方渲染，它仍将是父组件的的子级。
