全局API
1. 不再使用 new Vue
问题
使用new Vue
会共享一个全局配置。这对于测试来说不太友好,每个测试用例都需要一个沙盒环境,全局变量去残留一些副作用。
2. 不再用 Vue.prototype
// before - Vue 2
Vue.prototype.$http = () => {}
// after - Vue 3
const app = Vue.createApp({})
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. 现在需要手动挂载根元素
app.mount("#app")
🔥🔥 v-model新语法糖
默认使用modelValue
传递值。
<ChildComponent v-model="pageTitle" />
<!-- would be shorthand for: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
也支持绑定不同的属性,有点像是v-model
和sync
的结合体。
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- would be shorthand for: -->
<ChildComponent
:title="pageTitle"
@update:title="pageTitle = $event"
:content="pageContent"
@update:content="pageContent = $event"
/>
🔥异步组件需要显示定义
import { defineAsyncComponent } from 'vue'
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
🔥$attrs 将包含class和style
vue2.x中,class
和style
会被直接设置在组件的根元素上并且不会出现在$attrs
中。但是在vue3中,如果子组件只有一个根元素,则class
和style
会被直接设置在该元素上。超过一个则不会设置。如果组件中设置了inheritAttrs: false
,则无论如何都不会自动设置根元素的class
和style
。
🔥指令
指令和组件生命周期更契合,并使用统一的命名。
vue2.x | vue3 |
---|---|
bind | beforeMount |
inserted | mounted |
- | beforeUpdate (新) |
update (移除) | - |
componentUpdated | updated |
- | beforeUnmount (新) |
unbind | unmounted |
新特性fragments
template允许设置key
scopedSlots正式弃用
vue2.6中对slot
进行了改版,但是仍然对scopedSlots
兼容,vue3正式弃用掉scopedSlots
监听数组变化需要用deep属性啦
$children 被移除
事件API被移除
$on,$off,$once
不再使用。2.x的EventBus方法不能再使用。
🔥🔥Filter被移除!
不能再用|
使用filter。Sad。