vue3新特性

• 组合式API
  • setup()
• Teleport
  • 指定组件插入到DOM某处
  • to = "body"
• 片段
  • 允许template模板添加多root节点
  • <template><h1>111</h1><h2>222<h2/></template
• 组件自定义事件监听
  • 支持多v-model绑定
  • v-model传递的参数可以修改
  • emits 及emit验证,return true or return false
  • modelValue,modelModifiers,arg + "Modifiers",emits: ['update:modelValue', 'update:arg']
• css深度选择器,抛弃不规范的>>>,/deep/,使用::v-deep()或者其缩写:deep()
  • ::v-deep(.foo) {}
  • :deep(.foo) {}
• 全局Vue API更改为使用应用程序实例
  • import { createApp } from 'vue'; const app = createApp({})
  • Vue.prototype替换为config.globalProperties
  • Vue.ignoredElements替换为config.isCustomelement
  • Provide / Inject, 入口:app.provide('guide', 'vue 3 guide'), inject: { book: {from: 'guide'} }
  • 应用共享
  • nextTick使用ES模块导出
• 模板指令
  • v-model用法更改
  • .sync 用法移除,使用v-model
  • template中v-for的key应设置在template上
  • v-if的优先级优于v-for
  • v-bind="object" 绑定与单个property顺序影响渲染结果
  • v-on: native 修饰符移除
  • 删除 filter
• 组件
  • 使用普通函数替代功能函数
  • 异步组件需要通过defineAsyncComponent定义
  • 组件需要emits来进行事件触发
• 渲染函数
  • h需要全局导入
  • render不再接收任何参数,主要用于setup()内部使用
  • VNode Props结构扁平化
  • 需要注意Vue不应该绑定到库中
  • $scopedSlots删除,所有插槽通过$slots作为函数暴露
  • $listeners被移除或整合到$attrs
• 自定义元素
  • is做了处理
  • 自定义白名单编译时执行
• 其他
  • destoryed重命名为unmounted
  • beforeDestory重命名为beforeUnmounted
  • default prop 工厂函数不再可以访问this上线文,改为inject,从全局import进来
  • 自定义指令API变化
  • data选项只接受返回Object的function
  • Mixin合并行为变为浅合并,意味着不建议使用Mixin,避免依赖
  • Attribute如果是布尔值,不再删除值为false的选项
  • 过渡动画的class被重命名
  • <TransitionGroup>不再默认渲染包裹元素,因为有片段的存在,不需要根元素
  • watch监听一个数组,只要当数组被替换时,回调才会被触发,如果需要在变更时触发,则需要指定deep选项
  • 没有特殊指令标记(v-if/else-if/else、v-for,v-slot)的<template>现在被视为普通元素,并将生成的原生的<template>元素,而不是渲染其内部内容
• 移除的API
  • keyCode不再支持使用数字作为v-on的修饰符,也不支持config.keyCodes
  • $on,$off,$once弃用,建议使用外部库替换现有的event hub,例如mitt, tiny-emitter
  • 过滤指令弃用
  • $children指向子组件也被弃用,建议使用$ref
  • 用户不需要再手动管理单个Vue组件的生命周期

总的来说,对于vue2要迁入到vue3,影响还是很大,因为有很多原本用的较多的API被弃用,还是很需要花一番功夫和精力的,因此不是很建议升级上来,但vue3新特性带来的好处不言而喻,一个setup可以省很多事情,而且其实用的rollup的打包工具,比起webpack编译速度快了不知道多少倍,如果是新项目,建议完全可以拥抱vue3。