嚐鮮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) {}
```