尝鲜vue3.0-了解变化(2)

码农天地 - 2020-09-25 04:35:56

背景

经过上一篇文章尝鲜vue3.0-从ToDoList开始的介绍，大家可以初步了解一下vue3.0的简单写法。接下来，我描述一下尤大总结的总体变化，以及目前成熟的rfcs（语法变化）。

总体变化

Performance(性能)

重写vdom，提升了静态标记性能编译时优化更好的初始化性能更新更快ssr速度更快Tree-shaking support（tree shaking支持，文件更小）
组件不需要一个唯一的根节点Composition API新语法（Vue Composition API）Fragment（碎片）,Teleport（portal）,Suspense（异步组件）（新组件方式）Better Typescript support（更好的支持ts）Custom Renderer API（自定义渲染器）Active Rfcs

slot语法变化

v-slot在单一指令语法中统一了卡槽和槽作用域。v-slot简写为#，可以统一作用域槽和卡槽的使用。

删除了class component删除了 filter 和 inline template，取消v-on的keyCode（@keyup.enter）

directive

//动态转入指令名称
<div v-bind:[key]="value"></div>
<div v-on:[event]="handler"></div>
//
import { h, resolveComponent, resolveDirective, withDirectives } from 'vue'
export default {
  render() {
    const comp = resolveComponent('some-global-comp')
    const fooDir = resolveDirective('foo')
    const barDir = resolveDirective('bar')
    // <some-global-comp v-foo="x" v-bar="y" />
    return withDirectives(
      h(comp),
      [fooDir, this.x],
      [barDir, this.y]
    )
  }
}

为了运行tree-shaking，将api通过全局的import导出

//比如
import {nextTick,h,} from 'vue'

删除 v-bind.sync，用v-model代替

主要是考虑到v-bind.sync与v-model作用相同，使用起来会造成混乱在vue3里面，将会检测 v-bind.sync然后报warning，并且使用新的迁移助手检测并自动修复100%使用v-bind和.sync的情况

函数式组件必须为函数

删除 { functional: true } 不再支持 <template functional>

//与2.X相比
//只使用props和slot（data和childre就没了）
//使用的新的api inject代替injections
//parent被删除，首选使用props 和 injections 
//listeners 将包括在 attrs 属性中
 import { inject } from 'vue'
 import { demo } from './Demo'

 const FunctionalComp = (props, { slots, attrs, emit }) => {
   const demoCom = inject(demo)
   return h('div', `Using demo ${demoCom}`)
 }

必须用defineAsyncComponent来创建异步组件

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./Foo.vue'))

全局api的改变

改变Vue行为的global API被移到由新的apicreateApp方法创建的应用实例中，他们的只作用于app实例中，不改变Vue行为的gloabl API通过import使用，见第5点

render函数的变化h 使用import从vue中引用，见第五点render函数的传值，将和函数式组件保持一致，见第7点props, { slots, attrs, emit }vNodes变成扁平化的数据结构

export default {
 render() {
   return h(
     'div',
     //以前
     //{
      // domProps: { innerHTML: '' },
       //on: { click: foo },
       //key: 'foo',
       //class: ['foo', 'bar'],
       //style: { color: 'red' }，
       //attrs: { id: 'foo' },
     //},
     // 扁平化的数据结构
     {
       innerHTML: '',
       id: 'app',
       onClick:clickFn,
       key: 'foo',
       class: ['foo', 'bar'],
       style: { color: 'red' }
     },
     [
       h('span', 'world')
     ]
   )
 }
}

Composition API

目前变化的api，东西太多讲不完。大概就是上一遍新增的ref,reactive,watchEffect等api

transition变化

当从外部切换组件时，使用<transition>作为组件的根将不再触发转换

class变化

v-enter-from 替换 v-enterv-leave-from 替换 v-leavev-appear-from 替换 v-appear删除$on, $off, $once

在vue2.0里面，可以用声明式的$emit可触发父组件中的方法，但是也能使用命令式的$on, $off, $once也能实现。算是一种重载，也考虑到也没必要暴露组件实例

属性的强制行为

删除枚举属性的内部概念，并将这些属性视为普通的非布尔属性。

当值为布尔值时不再移除属性。相反，它被设置为attr="false"。若要删除该属性，请使用null或undefined。

//vue2.0中原话
//如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中
<button v-bind:disabled="isButtonDisabled">Button</button>

vue2.0 attribute地址

在单个文件组件的样式中提供自定义CSS扩展

弃用 >>> 和 /deep/