国产视频高清色无极怡红院,亚洲日韩欧美一区二区三区四区

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)VUE3教程：Vue3.0全局APITreeshaking

#2.x 語(yǔ)法

如果你曾經(jīng)在 Vue 中手動(dòng)操作過(guò) DOM，你可能會(huì)遇到以下模式：

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的加格達(dá)奇網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

import Vue from 'vue'


Vue.nextTick(() => {
  // 一些和DOM有關(guān)的東西
})

或者，如果你一直在對(duì)涉及 async components 的應(yīng)用程序進(jìn)行單元測(cè)試，那么很可能你編寫(xiě)了以下內(nèi)容：

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'


test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)


  // 執(zhí)行一些DOM相關(guān)的任務(wù)


  await wrapper.vm.$nextTick()


  // 運(yùn)行你的斷言
})

Vue.nextTick() 是一個(gè)全局的 API 直接暴露在單個(gè) Vue 對(duì)象上——事實(shí)上，實(shí)例方法 $nextTick() 只是一個(gè)方便的包裝 Vue.nextTick() 為方便起見(jiàn)，回調(diào)的 this 上下文自動(dòng)綁定到當(dāng)前實(shí)例。

模塊捆綁程序，如 webpack 支持 tree-shaking，這是“死代碼消除”的一個(gè)花哨術(shù)語(yǔ)。不幸的是，由于代碼是如何在以前的 Vue 版本中編寫(xiě)的，全局 API Vue.nextTick() 不可搖動(dòng)，將包含在最終捆綁中不管它們實(shí)際在哪里使用。

#3.x 語(yǔ)法

在 Vue 3 中，全局和內(nèi)部 API 都經(jīng)過(guò)了重構(gòu)，并考慮到了 tree-shaking 的支持。因此，全局 API 現(xiàn)在只能作為 ES 模塊構(gòu)建的命名導(dǎo)出進(jìn)行訪問(wèn)。例如，我們之前的片段現(xiàn)在應(yīng)該如下所示：

import { nextTick } from 'vue'


nextTick(() => {
  // 一些和DOM有關(guān)的東西
})

and

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'


test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)


  // 執(zhí)行一些DOM相關(guān)的任務(wù)


  await nextTick()


  // 運(yùn)行你的斷言
})

直接調(diào)用 Vue.nextTick() 將導(dǎo)致臭名昭著的 undefined is not a function 錯(cuò)誤。

通過(guò)這一更改，如果模塊綁定器支持 tree-shaking，則 Vue 應(yīng)用程序中未使用的全局 api 將從最終捆綁包中消除，從而獲得最佳的文件大小。

#受影響的 API

Vue 2.x 中的這些全局 API 受此更改的影響：

Vue.nextTick
Vue.observable (用 Vue.reactive 替換)
Vue.version
Vue.compile (僅全構(gòu)建)
Vue.set (僅兼容構(gòu)建)
Vue.delete (僅兼容構(gòu)建)

#內(nèi)部幫助器

除了公共 api，許多內(nèi)部組件/幫助器現(xiàn)在也被導(dǎo)出為命名導(dǎo)出，只有當(dāng)編譯器的輸出是這些特性時(shí)，才允許編譯器導(dǎo)入這些特性，例如以下模板：


  hello

被編譯為類似于以下的內(nèi)容：

import { h, Transition, withDirectives, vShow } from 'vue'


export function render() {
  return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
}

這實(shí)際上意味著只有在應(yīng)用程序?qū)嶋H使用了 Transition 組件時(shí)才會(huì)導(dǎo)入它。換句話說(shuō)，如果應(yīng)用程序沒(méi)有任何 Transition 組件，那么支持此功能的代碼將不會(huì)出現(xiàn)在最終的捆綁包中。

隨著全局 tree-shaking，用戶只需為他們實(shí)際使用的功能“付費(fèi)”，更好的是，知道了可選特性不會(huì)增加不使用它們的應(yīng)用程序的捆綁包大小，框架大小在將來(lái)已經(jīng)不再是其他核心功能的考慮因素了，如果有的話。

重要

以上僅適用于 ES Modules builds，用于支持 tree-shaking 的綁定器——UMD 構(gòu)建仍然包括所有特性，并暴露 Vue 全局變量上的所有內(nèi)容 (編譯器將生成適當(dāng)?shù)妮敵?，以使用全局外?api 而不是導(dǎo)入)。

#插件中的用法

如果你的插件依賴受影響的 Vue 2.x 全局 API，例如：

const plugin = {
  install: Vue => {
    Vue.nextTick(() => {
      // ...
    })
  }
}

在 Vue 3 中，必須顯式導(dǎo)入：

import { nextTick } from 'vue'


const plugin = {
  install: app => {
    nextTick(() => {
      // ...
    })
  }
}

如果使用 webpack 這樣的模塊捆綁包，這可能會(huì)導(dǎo)致 Vue 的源代碼綁定到插件中，而且通常情況下，這并不是你所期望的。防止這種情況發(fā)生的一種常見(jiàn)做法是配置模塊綁定器以將 Vue 從最終捆綁中排除。對(duì)于 webpack，你可以使用 externals 配置選項(xiàng)：

// webpack.config.js
module.exports = {
  /*...*/
  externals: {
    vue: 'Vue'
  }
}

這將告訴 webpack 將 Vue 模塊視為一個(gè)外部庫(kù)，而不是捆綁它。

如果你選擇的模塊綁定器恰好是 Rollup，你基本上可以免費(fèi)獲得相同的效果，因?yàn)槟J(rèn)情況下，Rollup 會(huì)將絕對(duì)模塊 id (在我們的例子中為 'vue') 作為外部依賴項(xiàng)，而不會(huì)將它們包含在最終的 bundle 中。但是在綁定期間，它可能會(huì)發(fā)出一個(gè)“將 vue 作為外部依賴” 警告，可使用 external 選項(xiàng)抑制該警告：

// rollup.config.js
export default {
  /*...*/
  external: ['vue']
}

網(wǎng)站名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0全局APITreeshaking
URL分享：http://www.dlmjj.cn/article/djhshsh.html