• createApp
• emits 属性
• 生命周期
• 多事件
• Fragment
• 移除 .sync
• 异步组件的写法
• 移除 filter
• Teleport
• Suspense
• Composition API

createApp

// vue2
const app = new Vue({ /* 选项 */ })
// vue3
const app = Vue.createApp({ /* 选项 */ })
// vue2
Vue.use()
Vue.mixin()
Vue.component()
Vue.direction()
// vue3
app.use()
app.mixin()
app.component()
app.direction()

emits 属性

// 父组件
<HelloWorld :msg="msg" @onSayHello="sayHello" />
// 子组件
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  // vue3需要声明父组件传递来的事件名
  emits: ['onSayHello'],
  setup(props, {emit}) {
    emit('onSayHello', 'payload')
  }
}

多事件处理

<!--多事件处理-->
<button @click="one($event), two($event)">Submit</button>

Fragment

<!-- vue2 -->
<template>
  <div>必须有一个根节点</div>
</template>
<!-- vue3 -->
<template>
  <div>无须必有一个根节点</div>
  <div>无须必有一个根节点</div>
</template>

移除 .sync

<!-- vue2 -->
<MyComponent v-bind:title.sync="title" />
<!-- vue3 -->
<MyCompoent v-model:title="title />

异步组件的写法

<!-- vue2 -->
new Vue({
  components: {
    'my-component': () => import('./my-async-component.vue')
  }
})
<!-- vue3 -->
import {createApp, defineAsyncComponent} from 'vue'
createApp({
  components: {
    AsyncComponent: defineAsyncComponent(() => 
      import('./components/AsyncComponent.vue')
    )
  }
})

移除 filter

平时也不使用，一般都在 computed 中就计算了

<!-- 以下 filter 在 vue3 中不可用了！！！ -->
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Teleport

<button @click="modalOpen = true">open</button>
<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      telePort 弹窗 （父元素是 body）
      <button @click="modalOpen = false">close</button>
    </div>
  </div>
</teleport>

Suspense

类似于自己实现的加载中的效果

<Suspense>
  <template>
    <Test1 /> <!-- 是一个异步组件 -->
  </template>
  <!-- 
    #fallback 就是一个具名插槽。 
    即 Suspense 组件内部，有两个 slot，
    其中一个具名为 fallback
  -->
  <template>
    Loading...
  </template>
</Suspense>

Composition API

• reactive
• ref 相关
• readonly
• watch 和 watchEffect
• setup
• 生命周期钩子函数