建站
咨詢
售后
建站咨詢
新聞中心
#2.x 語法
如果你曾經(jīng)在 Vue 中手動操作過 DOM，你可能會遇到以下模式：
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的加格達奇網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
import Vue from 'vue'
Vue.nextTick(() => {
// 一些和DOM有關的東西
})或者，如果你一直在對涉及 async components 的應用程序進行單元測試，那么很可能你編寫了以下內(nèi)容：
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
test('an async feature', async () => {
const wrapper = shallowMount(MyComponent)
// 執(zhí)行一些DOM相關的任務
await wrapper.vm.$nextTick()
// 運行你的斷言
}) Vue.nextTick() 是一個全局的 API 直接暴露在單個 Vue 對象上——事實上，實例方法 $nextTick() 只是一個方便的包裝 Vue.nextTick() 為方便起見，回調(diào)的 this 上下文自動綁定到當前實例。
模塊捆綁程序，如 webpack 支持 tree-shaking，這是“死代碼消除”的一個花哨術語。不幸的是，由于代碼是如何在以前的 Vue 版本中編寫的，全局 API Vue.nextTick() 不可搖動，將包含在最終捆綁中不管它們實際在哪里使用。
#3.x 語法
在 Vue 3 中，全局和內(nèi)部 API 都經(jīng)過了重構，并考慮到了 tree-shaking 的支持。因此，全局 API 現(xiàn)在只能作為 ES 模塊構建的命名導出進行訪問。例如，我們之前的片段現(xiàn)在應該如下所示：
import { nextTick } from 'vue'
nextTick(() => {
// 一些和DOM有關的東西
})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相關的任務
await nextTick()
// 運行你的斷言
}) 直接調(diào)用 Vue.nextTick() 將導致臭名昭著的 undefined is not a function 錯誤。
通過這一更改，如果模塊綁定器支持 tree-shaking，則 Vue 應用程序中未使用的全局 api 將從最終捆綁包中消除，從而獲得最佳的文件大小。
#受影響的 API
Vue 2.x 中的這些全局 API 受此更改的影響：
Vue.nextTickVue.observable(用Vue.reactive替換)Vue.versionVue.compile(僅全構建)Vue.set(僅兼容構建)Vue.delete(僅兼容構建)
#內(nèi)部幫助器
除了公共 api，許多內(nèi)部組件/幫助器現(xiàn)在也被導出為命名導出，只有當編譯器的輸出是這些特性時，才允許編譯器導入這些特性，例如以下模板：
hello
被編譯為類似于以下的內(nèi)容：
import { h, Transition, withDirectives, vShow } from 'vue'
export function render() {
return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
} 這實際上意味著只有在應用程序?qū)嶋H使用了 Transition 組件時才會導入它。換句話說，如果應用程序沒有任何 Transition 組件，那么支持此功能的代碼將不會出現(xiàn)在最終的捆綁包中。
隨著全局 tree-shaking，用戶只需為他們實際使用的功能“付費”，更好的是，知道了可選特性不會增加不使用它們的應用程序的捆綁包大小，框架大小在將來已經(jīng)不再是其他核心功能的考慮因素了，如果有的話。
重要
以上僅適用于 ES Modules builds，用于支持 tree-shaking 的綁定器——UMD 構建仍然包括所有特性，并暴露 Vue 全局變量上的所有內(nèi)容 (編譯器將生成適當?shù)妮敵?，以使用全局外?api 而不是導入)。
#插件中的用法
如果你的插件依賴受影響的 Vue 2.x 全局 API，例如：
const plugin = {
install: Vue => {
Vue.nextTick(() => {
// ...
})
}
}在 Vue 3 中，必須顯式導入：
import { nextTick } from 'vue'
const plugin = {
install: app => {
nextTick(() => {
// ...
})
}
} 如果使用 webpack 這樣的模塊捆綁包，這可能會導致 Vue 的源代碼綁定到插件中，而且通常情況下，這并不是你所期望的。防止這種情況發(fā)生的一種常見做法是配置模塊綁定器以將 Vue 從最終捆綁中排除。對于 webpack，你可以使用 externals 配置選項：
// webpack.config.js
module.exports = {
/*...*/
externals: {
vue: 'Vue'
}
}這將告訴 webpack 將 Vue 模塊視為一個外部庫，而不是捆綁它。
如果你選擇的模塊綁定器恰好是 Rollup，你基本上可以免費獲得相同的效果，因為默認情況下，Rollup 會將絕對模塊 id (在我們的例子中為 'vue') 作為外部依賴項，而不會將它們包含在最終的 bundle 中。但是在綁定期間，它可能會發(fā)出一個“將 vue 作為外部依賴” 警告，可使用 external 選項抑制該警告：
// rollup.config.js
export default {
/*...*/
external: ['vue']
}文章名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0全局APITreeshaking
URL地址：http://m.5511xx.com/article/djhshsh.html
