- 读了Vue3.0beta 文档，对原有的方法、属性与2.x不同的地方做了对比，记录下来做成表格，分享出来
- 计划分为5期发布，前期主要是分享差异与新特性的使用，最后的两期会深入分析与实现vue3.0响应式实现原理
- 表格中的 阿拉伯数字 为注解，在文章开头开头注解
- 正文开始，不到之处请留下您宝贵意见
- ⅰ：vm = 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实例 中而不在提供静态方法ⅱ提供了全局注入方法provide(key, value) 提供了解除挂载方法 unmount(ele) |
所有全局方法是Vue构造函数的静态方法 |
| 实例化 | Vue.createApp({}) | new Vue({}) |
| 实例化参数 | 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 重新转染的时候 debug用) beforeDestroy 变为 beforeUNmount destroyed 变为 unmounted |
ⅲ |
| mixins | 无变化 | 无变化 |
| extends | 无变化 | 无变化 |
新特性
-
resolveComponent
如果组件在当前应用程序实例中可用，则允许按其名称解析组件。
如果找不到组件，返回组件或undefined 。const app = Vue.createApp({}) app.component('MyComponent', { /* ... */ }) import { resolveComponent } from 'vue' render() { const MyComponent = resolveComponent('MyComponent') }返回值： component
-
resolveDynamicComponent
允许使用<component:is="">使用的相同机制来解析组件。
返回解析的组件或以组件名称作为节点标记的新创建的VNode。如果未找到该组件，将发出警告。
不太理解什么意思，等下次再补充import { resolveDynamicComponent } from 'vue' render () { const MyComponent = resolveDynamicComponent('MyComponent') }
resolveComponent, resolveDynamicComponent只能在渲染函数或函数组件中使用。
-
resolveDirective
如果指令在当前应用程序实例中可用，则允许按其名称解析指令。
返回一个指令或undefinedconst app = Vue.createApp({}) app.directive('highlight', {}) import { resolveDirective } from 'vue' render () { const highlightDirective = resolveDirective('highlight') }
-
withDirectives
允许应用指令到一个VNode。返回一个带有应用指令的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] // 指令名， 指令值， 参数， 修饰符 ... ])
