Vue3 - 渐进式
JavaScript 框架

易学易用，性能出色，适用场景丰富的 Web 前端框架。

Teleport

有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

Teleport 是一种能够将我们的组件html结构移动到指定位置的技术

例如，当父组件中使用了 filter 等 css 属性时，子组件的 position 属性会失效，这时可以使用 <teleport to="dom"></teleport> 挂载到某一html结点上，to 的值为元素选择器

vue
<template>
  <button @click="show = true">Show Modal</button>
  <Teleport to="body">
    <div class="modal" v-show="show">
      <h2>Modal Title</h2>
      <p>Modal content</p>
      <button @click="show = false">close</button>
    </div>
  </Teleport>
</template>

指定目标容器：

vue
<Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />

有条件地禁用：

vue
<Teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</Teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用 Suspense 包裹组件，并配置好 default 与 fallback (底层使用插槽实现)

vue
<template>
  <div class="outer">
    <h2>App</h2>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h2>loading</h2>
      </template>
    </Suspense>
  </div>
</template>

全局 API 转移到应用对象

• app.component

  typescript
  import Hello from './Hello';
  app.component('Hello', Hello);
  

• app.config

  typescript
  app.config.globalProperties.x = 99;
  declare module 'vue' {
    interface ComponentCustomProperties {
      x: number
    }
  }
  

• app.directive

  typescript
  /* main.ts */
  app.directive('beauty', (element, {value}) => {
    element.innerText += value;
    element.style.color = 'red';
    element.style.backgroundColor = 'skyblue';
  })
  
  /* Comp.vue */
  <h3 v-beauty="count">哈哈哈</h3>
  

• app.mount

• app.unmount

  typescript
  setTimeout(() => {
    app.unmount();
  }, 2000);
  

• app.use

Vue3 的非兼容性改变

非兼容性改变 | Vue 3 迁移指南 (vuejs.org)

全局API

• 全局 Vue API 更改为使用应用程序实例
• 全局和内部 API 都经过了重构，现已支持 TreeShaking （摇树优化）

模板指令

• v-model 指令在组件上的使用已经被重新设计，替换掉了 v-bind.sync
• [在`
• v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化
• v-bind="object" 现在是顺序敏感的
• v-on:event.native 事件修饰符已经被移除

组件

• 函数式组件只能通过纯函数进行创建
• [单文件组件 (SFC) `
• 异步组件现在需要通过 defineAsyncComponent 方法进行创建
• 组件事件现在应该使用 emits 选项进行声明

渲染函数

• 渲染函数 API 更改
• $scopedSlots property 已移除，所有插槽都通过 $slots 作为函数暴露
• $listeners 被移除或整合到 $attrs
• $attrs 现在包含 class 和 style attribute

自定义元素

• 自定义元素检测现在在模板编译时执行
• 特殊的 is attribute 的使用被严格限制在被保留的 `` 标签中

其他小改变

• destroyed 生命周期选项被重命名为 unmounted
• beforeDestroy 生命周期选项被重命名为 beforeUnmount
• Props 的 default 工厂函数不再可以访问 this 上下文
• 自定义指令的 API 已更改为与组件生命周期一致，且 binding.expression 已移除
• data 选项应始终被声明为一个函数
• 来自 mixin 的 data 选项现在为浅合并
• Attribute 强制策略已更改
• Transition 的一些 class 被重命名
• `` 不再默认渲染包裹元素
• 当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 deep 选项
• 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将渲染为原生的 <template> 元素，而不是渲染其内部内容。
• 已挂载的应用不会替换它所挂载的元素
• 生命周期的 hook: 事件前缀改为 vue:

被移除的 API

• keyCode 作为 v-on 修饰符的支持
• $on、$off 和 $once 实例方法
• 过滤器 (filter)
• 内联模板 attribute
• $children 实例 property
• propsData 选项
• $destroy 实例方法。用户不应该再手动管理单个 Vue 组件的生命周期。
• 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。