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

背景

经过上一篇文章尝鲜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]
       )
     }
   }

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

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

5. 删除 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

2. transition变化

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

   • class变化

     • v-enter-from 替换 v-enter
     • v-leave-from 替换 v-leave
     • v-appear-from 替换 v-appear
3. 删除$on, $off, $once

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

4. 属性的强制行为

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

   • 当值为布尔值时不再移除属性。相反，它被设置为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)