Скачать или смотреть Understanding the Power of h = h(App) in Vue CLI 3 Templates

Discover why `h = h(App)` is used in Vue CLI 3 while creating Vue applications, and how it allows greater flexibility compared to `new Vue(App)`.
---
This video is based on the question https://stackoverflow.com/q/62463483/ asked by the user 'Joseph' ( https://stackoverflow.com/u/11169941/ ) and on the answer https://stackoverflow.com/a/62464945/ provided by the user 'IVO GELOV' ( https://stackoverflow.com/u/5962802/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why vue cli 3 template or any other template has `h = h(App)` on main.js instead of just `new Vue(App)`?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Why Use h => h(App) in Vue CLI 3 Templates

If you're diving into Vue.js, particularly with Vue CLI 3 templates, you might notice a peculiar line of code in main.js:

[[See Video to Reveal this Text or Code Snippet]]

This line can leave beginners scratching their heads. After all, why not use something simpler, like new Vue(App).$mount("# app");? In this guide, we'll break down the reasons behind this syntax and its advantages in building Vue applications.

The Basic Difference

At first glance, the two methods might seem equivalent, but they serve different purposes in the lifecycle of a Vue application. Let’s look at both methods:

Method 1: Using the Options Object

[[See Video to Reveal this Text or Code Snippet]]

Method 2: Direct Instantiation

[[See Video to Reveal this Text or Code Snippet]]

While Method 2 directly places the App component into the Vue instance, Method 1 uses the options object, which opens a world of possibilities for enhancing your application.

Benefits of Using Method 1

1. Flexibility and Features

By using the options object, you unlock the ability to utilize:

Vue Router: Easily manage the navigation of your application.

Vuex: Centralize and manage the state of your application.

2. Defining Data and Properties

The options object allows you to define important properties that the application might need at runtime. Here’s a simplified example:

[[See Video to Reveal this Text or Code Snippet]]

This structure makes it easier to manage states like user authentication and loading indicators.

3. Lifecycle Hooks

Using the options object also provides access to lifecycle hooks, which allow you to execute code at specific points in the component’s lifespan. For instance:

[[See Video to Reveal this Text or Code Snippet]]

This means you can set up listeners and manage side effects efficiently, leading to cleaner code.

4. Computed Properties and Methods

You can define computed properties and methods directly within the same options object, improving organization:

[[See Video to Reveal this Text or Code Snippet]]

This enables you to easily compute values based on the instance’s data and or props, giving your components deeper capabilities.

Conclusion

While new Vue(App) seems like a straightforward approach, transitioning to h => h(App) inside the options object of the Vue instance can vastly enhance your app's architecture and maintainability. By leveraging features like Vue Router, Vuex, data properties, computed properties, lifecycle hooks, and methods, your applications can become both more powerful and user-friendly.

In summary, embracing Method 1 enriches your development experience in Vue.js, setting the stage for more intricate and scalable applications. As you continue to work with Vue, consider the advantages detailed here for your future projects!