亲爱的阿乾
亲爱的阿乾

Vue3.0尝鲜

Vue3官网API地址： https://v3.vuejs.org/guide/installation.html

Vue2.0 迁移 Vue3.0  https://v3.vuejs.org/guide/migration/introduction.html#overview

异同点：

 3.0比2.0 快2倍

·  3.0去掉了filter, 么有beforeCreate created,用setup取代

· reactivity是可以单独作为库使用的 

· 单独功能可以抽离 取代了mixin  优于mixin 解决上下反复横跳

· 支持多个子节点 fragment

· setup里没有this

· Proxy实现响应式不需要set delete  兼容性并不好

· 响应式方面 性能得到很大提升 不用初始化的时候就递归遍历属性

· 响应式不区分数组和对象

· 3.0兼容IE12以上

· composition api 可以和 options API 同时存在

  • ⅰ：vm = Vue.createApp({}) || new Vue({}) Vue实例化对象
  • ⅱ：全局方法 component directive mixin mount use provide
  • ⅲ：生命周期 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed,errorCaptured
    • *

Vue3.0尝鲜_第1张图片
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()

生命周期
Vue3.0尝鲜_第2张图片
ⅲ
添加了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]
  // 指令名， 指令值， 参数， 修饰符
  ...
])

以下是从2.x进行的重大更改的列表：

＃全局API

＃模板指令