Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use vue3.0 's global-api-treeshaking". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use vue3.0 's global-api-treeshaking" can help you solve your doubts.

Import {nextTick, observable} from 'vue'

NextTick (() = > {})

Const obj = observable ({})

As Vue API grows, we have been trying to balance the tradeoff between functionality and bundle size. We want to keep the size overhead of Vue to a minimum, but we don't want to limit its functionality because of size constraints.

Through the static analysis-friendly design of ES modules, modern balers combined with reduced programs can now eliminate ES module exports that are not used anywhere in the bundle. We can reorganize the global and internal API of Vue to take advantage of this advantage so that users only pay for the features they actually use.

In addition, knowing that optional features will not increase the bundle size of users who do not use them, we now have more room to include optional features in the core.

Currently in 2.x, all global API are exposed on a single Vue object:

Import Vue from 'vue'

Vue.nextTick (() = > {})

Const obj = Vue.observable ({})

In 3.x, they can only be accessed as named imports:

Import Vue, {nextTick, observable} from 'vue'

Vue.nextTick / / undefined

NextTick (() = > {})

Const obj = observable ({})

Affected 2.x APIs

Internal Helpers

In addition to the public API, many internal components / helpers can also be exported as named exports. This allows the compiler to output code that imports features only when they are used. For example, the following template

Hello

Can be compiled to the following (for explanatory purposes, not the exact output):

Import {h, Transition, applyDirectives, vShow} from 'vue'

Export function render () {

Return h (Transition, [

ApplyDirectives (h ('div',' hello'), this, [vShow, this.ok])

])

}

Global API usage in plugins

2.x

Const plugin = {

Install: Vue = > {

Vue.nextTick () = > {

/ /...

})

}

}

3.x

Import {nextTick} from 'vue'

Const plugin = {

Install: app = > {

NextTick () = > {

/ /...

})

}

}

After reading this, the article "how to use the global-api-treeshaking of vue3.0" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.