New Features
Composition API = hooks
Teleport = Portal
Fragments = Fragments
emits
Component Option = 定義 emit 的事件
v-model
modifiers = 可以在 v-model 用 mod
createRenderer = can create custom renderers
以上不討論
比較常用的
- Global Vue -> app instance
- Global Vue methods -> named export
- Render function h -> named export
- v-model & .sync
- Functional component
- Async components
- data is function
- Watch
比較不常用的
- Custom elements
- is & v-is
- $scopedSlots
- Attributes coercion strategy
- v-directive
- Transition classes
- outerHTML -> innerHTML
- keyCode
- \$on, \$off, \$once
- Filters
- Inline template
Breaking Changes
# Global Vue -> app instance
// 2.x
import Vue from 'vue';
//3.x
import { createApp } from 'vue';
const app = createApp({});
2.x Global API | 3.x Instance 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 |
# Global Vue methods -> named export
// 2.x
import Vue from 'vue'
Vue.nextTick(...)
// 3.x
import { nextTick } from 'vue'
nextTick(...)
Effected | |
---|---|
Vue.nextTick |
|
Vue.observable |
replaced by reactive
|
Vue.version |
|
Vue.compile |
only in full builds |
Vue.set |
only in compat builds |
Vue.delete |
only in compat builds |
# Render function h
-> named export
import { h } from 'vue'
export default {
render() {
return h('div')
}
}
# v-model & .sync
統一介面
myProp.sync
語法移除,改為 v-model:myProp
v-model
語法糖改為等同於 v-model:modelValue
shorthand | prop | event | |
---|---|---|---|
2.x | v-model | value | input |
:myProp.sync | myProp | update:myProp | |
3.x | v-model | modelValue | update:modelValue |
v-model:myProp | myProp | update:myProp |
# Functional component
<template functional>
跟 { functional: true }
被移除
functional component 對效能幾乎沒有影響,可以不用刻意標示
真的要做 functional component 的話只能以匯出 function 的方式
import { h } from 'vue'
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
(但這樣有比較輕鬆嗎)
# Async components
- 非同步組件必須用
defineAsyncComponent
包起來 -
component
屬性改名為loader
- loader 函式必須回傳 Promise
// 3.x
import { defineAsyncComponent } from 'vue'
// Async component without options
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// Async component with options
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
})
// 3.x
const asyncComponent = defineAsyncComponent(
() => new Promise(...)
)
# data
現在一律必須是 function
很好
# Watch
不再支援 path 作為 watcher (例如 '$store.state.count'()
)
必須透過 computed
Breaking Changes (比較不常用的東西)
# Custom elements
Vue.ignoredElements
要改為 vue-loader
的 options, 或者 app.config.isCustomElement
# is & v-is
is
現在只能用在 <component>
上
在 custom component (Web Component API) 上要換成 v-is
# $scopedSlots
this.$scopedSlots
都要改成 this.$slots
# Attributes coercion strategy
不用管
簡單來說如果 v-bind 一個 attribute 到一個 element 上
2.x 如果值是 null
undefined
false
那屬性會從元素被移除,但對於某些特殊屬性如 draggable 又不太一致
3.x 統一為 null
undefined
會被移除,其他都會照原本值 render 出來
# v-directive
當定義 directive 的時候 (例如寫一個 v-tooltip
時),lifecycle hooks 的命名改了,改成跟一般 component 的 lifecycle 一樣
2.x | 3.x |
---|---|
bind | beforeMount |
inserted | mounted |
- | beforeUpdate |
update | - |
componentUpdated | updated |
- | beforeUnmount |
unbind | unmounted |
# Transition classes
改名
v-enter
-> v-enter-from
v-leave
-> v-leave-from
# outerHTML -> innerHTML
2.x 會把指定的 root element 透過 outerHTML 整個換掉
3.x 會用 innerHTML 塞裡面
# keyCode
直接以數字 keyCode 作 modifier 被移除
但還是可以用鍵名例如 @keyup.delete
// removed
<input v-on:keyup.112="showHelpText" />
# \$on, \$off, \$once
移除.vue instance 不再實作 event emitter
// removed
this.$on('some-event', ...)
讚
# Filters
移除.
// removed
<p>{{ accountBalance | currencyUSD }}</p>
超讚,討厭 filter
# Inline template
移除.
// removed
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
這什麼從來沒看過
Top comments (1)
Dang. That's lots of changes. I will wait till everything is stable and English document is fully available.