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
• • *

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

如果指令在当前应用程序实例中可用，则允许按其名称解析指令。
返回一个指令或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

• Global Vue API更改为使用应用程序实例
• 全局和内部API已重组为可摇树的

＃模板指令

• v-model 组件上的用法已重新设计
• key<template v-for>和非v-for节点上的使用情况已更改
• v-if和v-for在同一元素上使用时的优先级已更改
• v-bind="object" 现在对订单敏感
• v-on:event.native 修饰符已被删除
• ref内部v-for不再注册引用数组

＃组件

• 功能组件只能使用普通函数创建
• functional单文件组件（SFC）上的属性<template>和functional组件选项已弃用
• 异步组件现在需要defineAsyncComponent创建方法
• 现在应使用emits选项声明组件事件

＃渲染功能

• 渲染功能API已更改
• $scopedSlots属性被删除，所有插槽都通过$slotsas函数公开
• $listeners 已被删除/合并到 $attrs
• $attrs现在包括class和style属性

＃自定义元素

• 现在在模板编译期间执行自定义元素白名单
• 特殊is道具的使用仅限于保留<component>标签

＃其他小的变化

• 在destroyed生命周期的选项已更名为unmounted
• 在beforeDestroy生命周期的选项已更名为beforeUnmount
• 道具default工厂功能不再可以访问this上下文
• 自定义指令API更改为与组件生命周期保持一致
• 该data选项应始终声明为函数
• data现在，mixin中的选项已被浅层合并
• 属性强制策略已更改
• 一些过渡班改名了
• 当观看数组时，回调仅在替换数组时触发。如果需要触发突变，则deep必须指定该选项。
• <template>没有特殊指令（v-if/else-if/else，v-for或v-slot）的标记现在被视为普通元素，并且将导致本机<template>元素而不呈现其内部内容。
• 在Vue 2.x中，应用程序的根容器outerHTML被根组件模板替换（如果根组件没有模板/渲染选项，则最终编译为模板）。Vue 3.x现在innerHTML改为使用应用程序容器-这意味着容器本身不再被视为模板的一部分。

＃删除的API

• keyCode支持作为v-on修饰符
• $ on，$ off和$ once实例方法
• 筛选器
• 内联模板属性
• $destroy实例方法。用户不应再手动管理各个Vue组件的生命周期。

遇到的问题：

1.context的作用？

2.不声明ref如何修改const数值？

3.$set是否需要？

4.torefs转的是什么？

5.监听父组建某个值变化

6.watchEffect停止监听后，如何恢复监听？

7.v- model绑定多个值(Vue3.0 v-model的新特性)?

8.函数组件如何传值（如何定义默认值）？

9.路由守卫的问题。