- 讀了Vue3.0beta 文檔，對原有的方法、屬性與2.x不同的地方做了對比，記錄下來做成表格，分享出來
- 計劃分為5期發(fā)布，前期主要是分享差異與新特性的使用，最后的兩期會深入分析與實現(xiàn)vue3.0響應(yīng)式實現(xiàn)原理
- 表格中的 阿拉伯?dāng)?shù)字 為注解，在文章開頭開頭注解
- 正文開始，不到之處請留下您寶貴意見
- ?。簐m = Vue.createApp({}) || new Vue({}) Vue實例化對象
- ⅱ：全局方法 component directive mixin mount use provide
- ⅲ：生命周期 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed,errorCaptured
| API / Func名稱 | Vue3 | Vue2.x |
|---|---|---|
| 全局掛載屬性/方法 |
ⅰvm.confi.globalProperties.xxx = xxx |
Vue.prototype.xxx = xxx |
| 自定義元素 | vm.config.isCustomElement = tag => tag.startWith('str-') | Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component', /^str-/ ] |
| 合并策略 | vm.config.optionsMergeStrategies.hello = (toVal, fromVal, vm) => { |
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {// 返回合并后的值} |
| 全局方法 | 所有的全局方法掛載在 vm實例 中而不在提供靜態(tài)方法ⅱ提供了全局注入方法provide(key, value) 提供了解除掛載方法 unmount(ele) |
所有全局方法是Vue構(gòu)造函數(shù)的靜態(tài)方法 |
| 實例化 | Vue.createApp({}) | new Vue({}) |
| 實例化參數(shù) | Object | Object |
| 實例化傳入props | Vue.createApp({props: ['propA']}, {propA: 'a'}) | const Comp = Vue.extend(comp) new Comp({propsData: {}}) |
| 定義一個組件 | import {defineComponent} from 'vue' const Comp = defineComponent({}) |
const Comp = Vue.component('name', {}) |
| 異步組件 | import {defineAsyncComponent} from 'vue' asyncComp: defineAsyncComponent( () => import(componentPath) ) |
asyncComp: () => import(componentPath) |
| nextTick | import {createApp, nextTick } from 'vue' |
vm.$nextTick() |
| 生命周期 |
ⅲ添加了renderTracked(vnode 第一次渲染的時候 debug用), renderTriggered(vnode 重新轉(zhuǎn)染的時候 debug用) beforeDestroy 變?yōu)?beforeUNmount destroyed 變?yōu)?unmounted |
ⅲ |
| mixins | 無變化 | 無變化 |
| extends | 無變化 | 無變化 |
新特性
-
resolveComponent
如果組件在當(dāng)前應(yīng)用程序?qū)嵗锌捎?，則允許按其名稱解析組件。
如果找不到組件，返回組件或undefined 。const app = Vue.createApp({}) app.component('MyComponent', { /* ... */ }) import { resolveComponent } from 'vue' render() { const MyComponent = resolveComponent('MyComponent') }返回值： component
-
resolveDynamicComponent
允許使用<component:is="">使用的相同機制來解析組件。
返回解析的組件或以組件名稱作為節(jié)點標(biāo)記的新創(chuàng)建的VNode。如果未找到該組件，將發(fā)出警告。
不太理解什么意思，等下次再補充import { resolveDynamicComponent } from 'vue' render () { const MyComponent = resolveDynamicComponent('MyComponent') }
resolveComponent, resolveDynamicComponent只能在渲染函數(shù)或函數(shù)組件中使用。
-
resolveDirective
如果指令在當(dāng)前應(yīng)用程序?qū)嵗锌捎?，則允許按其名稱解析指令。
返回一個指令或undefinedconst app = Vue.createApp({}) app.directive('highlight', {}) import { resolveDirective } from 'vue' render () { const highlightDirective = resolveDirective('highlight') }
-
withDirectives
允許應(yīng)用指令到一個VNode。返回一個帶有應(yīng)用指令的VNode。
import { withDirectives, resolveDirective } from 'vue' const foo = resolveDirective('foo') const bar = resolveDirective('bar') return withDirectives(h('div'), [ [foo, this.x], [bar, this.y], [directive, value], [directive, value, arg, modifiers] // 指令名， 指令值， 參數(shù)， 修飾符 ... ])
