Vue3.0与Vue2.0对比（一）

• 读了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

允许使用使用的相同机制来解析组件。
返回解析的组件或以组件名称作为节点标记的新创建的VNode。如果未找到该组件，将发出警告。
不太理解什么意思，等下次再补充

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')
}

resolveComponent, resolveDynamicComponent只能在渲染函数或函数组件中使用。

• resolveDirective

如果指令在当前应用程序实例中可用，则允许按其名称解析指令。
返回一个指令或undefined

const 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]
  // 指令名， 指令值， 参数， 修饰符
  ...
])

未完待续。。。