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

时间 2020-12-01

标签 html vue react api 性能优化数据结构 app dom 异步 ide 栏目 HTML 繁體版

原文原文链接

背景

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

整体变化

Performance(性能)vue
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

slot语法变化react
- v-slot在单一指令语法中统一了卡槽和槽做用域。
- v-slot简写为#，能够统一做用域槽和卡槽的使用。

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

directiveapi

//动态转入指令名称
<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的状况

函数式组件必须为函数app

删除 { 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点
dom

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变化ide
- 当从外部切换组件时，使用<transition>做为组件的根将再也不触发转换
- class变化
  - v-enter-from 替换 v-enter
  - v-leave-from 替换 v-leave
  - v-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/
```
//使用这种
::v-deep(.bar) {}
```
新伪类做用域组件块的全局样式::v-global(.foo) {}
当前，从父节点传入的插槽内容同时受到父节点和子节点的样式影响。没法显式的建立以slot内容为目标的样式，或者不影响slot内容的样式，vue3.0中增长::v-slotted()
```
::v-slotted(.foo) {}
```

Teleport 传送门（具体见上一篇）
路由相关
也新增了不少api，可是细节太多，后面再补一篇细节

最后

目前的改动简单的列举了一下，vue3.0改动很大，可是更可能是整理简化api，增长更多开发者须要的api，内部语法调整，以及性能优化。仍是尽可能的贴合之前开发习惯，下降升级成本。因此你们不用担忧，能够愉快的接受3.0

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