全局API

1. 不再使用 new Vue

问题
使用new Vue会共享一个全局配置。这对于测试来说不太友好,每个测试用例都需要一个沙盒环境,全局变量去残留一些副作用。

解决
开始使用application概念,创建一个App

2. 不再用 Vue.prototype

  1. // before - Vue 2
  2. Vue.prototype.$http = () => {}
  1. // after - Vue 3
  2. const app = Vue.createApp({})
  3. app.config.globalProperties.$http = () => {}

3. 全局方法现在在app实例上

vue2.x vue3
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use

4. 现在需要手动挂载根元素

  1. app.mount("#app")


🔥🔥 v-model新语法糖

默认使用modelValue传递值。

  1. <ChildComponent v-model="pageTitle" />
  2. <!-- would be shorthand for: -->
  3. <ChildComponent
  4. :modelValue="pageTitle"
  5. @update:modelValue="pageTitle = $event"
  6. />

也支持绑定不同的属性,有点像是v-modelsync的结合体。

  1. <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
  2. <!-- would be shorthand for: -->
  3. <ChildComponent
  4. :title="pageTitle"
  5. @update:title="pageTitle = $event"
  6. :content="pageContent"
  7. @update:content="pageContent = $event"
  8. />

🔥异步组件需要显示定义

  1. import { defineAsyncComponent } from 'vue'
  2. const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

🔥$attrs 将包含class和style

vue2.x中,classstyle会被直接设置在组件的根元素上并且不会出现在$attrs中。但是在vue3中,如果子组件只有一个根元素,则classstyle会被直接设置在该元素上。超过一个则不会设置。如果组件中设置了inheritAttrs: false,则无论如何都不会自动设置根元素的classstyle

🔥指令

指令和组件生命周期更契合,并使用统一的命名。

vue2.x vue3
bind beforeMount
inserted mounted
- beforeUpdate (新)
update (移除) -
componentUpdated updated
- beforeUnmount (新)
unbind unmounted

新特性fragments

允许组件有多个根元素!

template允许设置key

循环template再也不用往里面设置key了。

scopedSlots正式弃用

vue2.6中对slot进行了改版,但是仍然对scopedSlots兼容,vue3正式弃用掉scopedSlots

监听数组变化需要用deep属性啦

如果不加deep只能检测整个数组被替换。

$children 被移除

如果想访问子组件,使用$refs

事件API被移除

$on,$off,$once不再使用。2.x的EventBus方法不能再使用。

🔥🔥Filter被移除!

不能再用|使用filter。Sad。