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

阿秋_在路上
1,465 阅读3分钟

背景

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

总体变化

  • Performance(性能)

    1. 重写vdom，提升了静态标记性能
    2. 编译时优化
    3. 更好的初始化性能
    4. 更新更快
    5. ssr速度更快

  • Tree-shaking support（tree shaking支持，文件更小） 组件不需要一个唯一的根节点

  • Composition API新语法（Vue Composition API）

  • Fragment（碎片）,Teleport（portal）,Suspense（异步组件）（新组件方式）

  • Better Typescript support（更好的支持ts）

  • Custom Renderer API（自定义渲染器）

Active Rfcs

  1. slot语法变化
  • v-slot在单一指令语法中统一了卡槽和槽作用域。
  • v-slot简写为#，可以统一作用域槽和卡槽的使用。
  1. 删除了class component
  2. 删除了 filter 和 inline template，取消v-on的keyCode（@keyup.enter）
  3. 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]
    )
  }
}
  1. 为了运行tree-shaking，将api通过全局的import导出
//比如
import {nextTick,h,} from 'vue'
  1. 删除 v-bind.sync，用v-model代替
  • 主要是考虑到v-bind.sync与v-model作用相同，使用起来会造成混乱
  • 在vue3里面，将会检测 v-bind.sync然后报warning，并且使用新的迁移助手检测并自动修复100%使用v-bind和.sync的情况
  1. 函数式组件必须为函数
  • 删除 { 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'))
  1. 全局api的改变

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

  1. 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')
     ]
   )
 }
}
  1. Composition API

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

  1. transition变化
  • 当从外部切换组件时，使用<transition>作为组件的根将不再触发转换
  • class变化
    • v-enter-from 替换 v-enter
    • v-leave-from 替换 v-leave
    • v-appear-from 替换 v-appear
  1. 删除$on, $off, $once

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

  1. 属性的强制行为
  • 删除枚举属性的内部概念，并将这些属性视为普通的非布尔属性。
  • 当值为布尔值时不再移除属性。相反，它被设置为attr="false"。若要删除该属性，请使用null或undefined。
//vue2.0中原话
//如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中
<button v-bind:disabled="isButtonDisabled">Button</button>

vue2.0 attribute地址

  1. 在单个文件组件的样式中提供自定义CSS扩展
  • 弃用 >>> 和 /deep/ 
    //使用这种
::v-deep(.bar) {}
  • 新伪类作用域组件块的全局样式::v-global(.foo) {}
  • 当前，从父节点传入的插槽内容同时受到父节点和子节点的样式影响。无法显式的创建以slot内容为目标的样式，或者不影响slot内容的样式，vue3.0中增加::v-slotted() 
    ::v-slotted(.foo) {}
  1. Teleport 传送门（具体见上一篇）
  2. 路由相关 也新增了很多api，但是细节太多，后面再补一篇细节

最后

目前的改动简单的列举了一下，vue3.0改动很大，但是更多是整理简化api，增加更多开发者需要的api，内部语法调整，以及性能优化。还是尽量的贴合以前开发习惯，降低升级成本。所以大家不用担心，可以愉快的接受3.0

喜欢的话，大佬们可以点赞收藏，后续再更新😄 下一篇尝鲜vue3.0-tyepscript开发组件(3)

avatar
文章
阅读
粉丝