vue2升级vue3注意事项

vite兼容

1. require.context 替换成import.meta.globEager
2. scss 全局注入，需要在vite.config.ts配置@use "sass:math"; @import "./src/amf/styles/variables.module.scss
3. 静态资源无法require，必须使用import

css预编译处理语言

1. 穿透css，必须使用 :v-deep(.className){};
2. :export在vite中不支持，可以修改成.module.scss

element-plus组件库

1. Icon 语法改为： <el-icon><edit /></el-icon> 或者直接使用svg<edit />

• 内置组件中使用icon，需要单独引入

import { Search } from '@element-plus/icons'
<el-button type="primary" :icon="Search">Search</el-button> 

2. dialog visible改为v-model
3. 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 数组
  • 结合可以为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
• 片段
  • 3.0中组件支持多个根节点组件。

<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

• 全局 API
  • createApp返回一个应用实例。

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之后，即使子组件在不同的地方渲染，它仍将是父组件的的子级。