abcAppearance
vue3
介绍vue3 的新特性、vue3 和 vue2 的差异、vue3 案例及代码、打包工具等
vue3 的新特性
组合式 API (Composition Api)
传送 (Teleport)
片段 (fragments)
组件自定义事件 (component-custom-events)
来自 @vue/runtime-core 的 createRenderer API 创建自定义渲染器
单文件组件组合式 API 语法糖 (<script setup>) 实验性
单文件组件状态驱动的 CSS 变量 (<style vars>) 实验性
单文件组件 <style scoped> 现在可以包含全局规则或只针对插槽内容的规则
非兼容的变更
全局 API
全局 Vue API 已更改为使用应用程序实例
| 2.x 全局 API | 3.x 实例 API (app) |
|---|---|
| Vue.config | app.config |
| Vue.config.productionTip | 已移除 |
| Vue.config.ignoredElements | app.config.isCustomElement |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |
全局和内部 API 已经被重构为可 tree-shakable
ES Modules builds 可默认通过 tree-shakable 避免打包未被使用的 Vue Api
模板指令
组件上 v-model 用法已更改，替换 v-bind.sync
概览 就变化内容而言，此部分属于高阶内容：
- 非兼容：用于自定义组件时，
v-modelprop 和事件默认名称已更改：- prop：
value->modelValue； - event：
input->update:modelValue；
- prop：
- 非兼容：
v-bind的.sync修饰符和组件的model选项已移除，可用v-model作为代替； - 新增：现在可以在同一个组件上使用多个
v-model进行双向绑定； - 新增：现在可以自定义
v-model修饰符。
<template v-for> 和非 v-for 节点上 key 用法已更改
概览
- 新增：对于
v-if/v-else/v-else-if的各分支项key将不再是必须的，因为现在 Vue 会自动生成唯一的key。 - 非兼容：如果你手动提供 key，那么每个分支必须使用唯一的 key。你不能通过故意使用相同的 key 来强制重用分支。
- 非兼容：
<template v-for>的 key 应该设置在<template>标签上 (而不是设置在它的子节点上)。
在同一元素上使用的 v-if 和 v-for 优先级已更改
概览
- 非兼容：两者作用于同一个元素上时，
v-if会拥有比v-for更高的优先级。