vue3新特性
- 组合式API
- Teleport
- 片段
- 允许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.globalPropertiesVue.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
- 自定义元素
- 其他
destoryed重命名为unmountedbeforeDestory重命名为beforeUnmounteddefault 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。
vue3新特性
<template><h1>111</h1><h2>222<h2/></templatev-model绑定v-model传递的参数可以修改emits及emit验证，return trueorreturn false>>>,/deep/，使用::v-deep()或者其缩写:deep()::v-deep(.foo) {}:deep(.foo) {}Vue API更改为使用应用程序实例import { createApp } from 'vue';const app = createApp({})Vue.prototype替换为config.globalPropertiesVue.ignoredElements替换为config.isCustomelementnextTick使用ES模块导出v-bind="object"绑定与单个property顺序影响渲染结果v-on: native修饰符移除defineAsyncComponent定义emits来进行事件触发setup()内部使用VNode Props结构扁平化Vue不应该绑定到库中$scopedSlots删除，所有插槽通过$slots作为函数暴露$listeners被移除或整合到$attrsdestoryed重命名为unmountedbeforeDestory重命名为beforeUnmounteddefault prop工厂函数不再可以访问this上线文，改为inject，从全局import进来Object的functionMixin合并行为变为浅合并，意味着不建议使用Mixin，避免依赖Attribute如果是布尔值，不再删除值为false的选项class被重命名<TransitionGroup>不再默认渲染包裹元素，因为有片段的存在，不需要根元素watch监听一个数组，只要当数组被替换时，回调才会被触发，如果需要在变更时触发，则需要指定deep选项v-if/else-if/else、v-for，v-slot)的<template>现在被视为普通元素，并将生成的原生的<template>元素，而不是渲染其内部内容keyCode不再支持使用数字作为v-on的修饰符，也不支持config.keyCodes$on,$off,$once弃用，建议使用外部库替换现有的event hub,例如mitt,tiny-emitter$children指向子组件也被弃用，建议使用$refVue组件的生命周期总的来说，对于
vue2要迁入到vue3，影响还是很大，因为有很多原本用的较多的API被弃用，还是很需要花一番功夫和精力的，因此不是很建议升级上来，但vue3新特性带来的好处不言而喻，一个setup可以省很多事情，而且其实用的rollup的打包工具，比起webpack编译速度快了不知道多少倍，如果是新项目，建议完全可以拥抱vue3。