A brief talk about the knowledge you need to master when getting started with Vue

As one of the most popular front-end frameworks, Vue is the first choice for many front-end development engineers. Recently, I have also used Vue to implement several products in the front-end position, so today I will share what Vue is and my insights on Vue.

I. Definition

Vue is a progressive JavaScript framework for building user interfaces.

Unlike traditional JS and JQuery frameworks, Vue's progressive framework means that developers can start with simple components and gradually build a complex front-end platform.
The core concepts that form the Vue progressive framework are: componentization , MVVM , responsiveness , and lifecycle , which will be introduced in detail below.

2. Why use Vue?

1. Componentization

Vue combines the HTML, CSS, and JS that make up a page into a component , which can be introduced and reused by other components or pages. Typically each .Vue file is exported as a component, which can be a base component (such as a button) or a page (such as a login page). Componentization can effectively split a large and complex front-end project into individual components, and its reusable nature also greatly improves development efficiency.

2. MVVM data two-way binding

The MVVM mode (full name: Model-View-ViewModel) implements two-way data binding for Vue. In MVVM, View is the view layer, ViewModel is the business logic layer, and Model is the data layer.

What is two-way data binding? When the user changes the View (such as filling out a form), the changes are automatically synchronized to the ViewModel to process the corresponding logic and update the changes to the Model database. On the contrary, if the server-side data changes (such as stock price fluctuations), the changes will be automatically synchronized to the ViewModel to process the corresponding logic, and the changes will be synchronized to the View to display to the user.

Before using Vue, I needed to use a lot of DOM operations to achieve dynamic loading to complete the interaction between HTML and JS. MVVM's two-way data binding reduces DOM operations and implements the interaction between views and data more efficiently. At the same time, MVVM separates the interface, interaction, and data layers, making it easier for designers to design the interface, back-end developers to provide data interfaces, and front-end developers to focus on implementing business interaction logic.

3. Responsive Virtual DOM

For DOM, when an HTML element (such as div) needs to respond to data changes, the entire page will be refreshed, resulting in poor efficiency. For Virtual DOM , the browser converts the HTML file into a JS file and copies an additional use (virtual). For any changes, the virtual DOM compares the copied JS with the original JS and reloads only the changed parts , locally modifying them onto the real DOM.

In Vue, each component that is bound to a data attribute has a Watcher to detect changes in the data attribute. Once a change is detected, the component is re-rendered, which is responsive .

4. Lifecycle

Finally, each Vue component has a life cycle, the process is create -> mount -> update -> destroy . Developers can use hook functions (such as mounted) to perform operations at different times in the component life cycle. Below is a complete diagram of the Vue life cycle.

3. Advantages and disadvantages of Vue

After talking about several core concepts of Vue, let's summarize the advantages and disadvantages of using the Vue framework for front-end development:

advantage

1. Lightweight

As a lightweight front-end framework, Vue is only 18-21KB in size. The project is easy to build and only requires a few lines of command. Because the main language used by Vue is JS, developers can flexibly migrate projects from other frameworks (such as React and Angular) to Vue, which has high integration capabilities . The router provided by Vue can easily build a multi-interface application .

2. High performance

Virtual DOM and responsiveness avoid unnecessary global re-rendering, improve user experience , and make user operations smoother.

3. Easy to use

Similar to object-oriented programming, componentization is more in line with human thinking . For example, when we design a web page, we usually divide an interface into pieces of specific style modules used for certain functions. Vue's componentization makes front-end development easier to understand , and MVVM can achieve interaction more conveniently, which is very friendly to novices.

4. Plugin

Due to the popularity of the Vue framework, there are currently many npm extension packages and development tools based on Vue (such as Vuex). Vue can manage the global use of all external plug-ins in one file.

5. Easy to test

Componentization helps developers test a single component , and it is rare that they cannot find where an error occurs on the entire page.

shortcoming

1. The ecological environment is not perfect

Although Vue has been developing for five years, its ecological environment is not as standardized as React and Angular. The discussion community for Vue development is relatively small .

2. Small overseas market

Vue was developed by China's You Da Shen, and is mainly used by major domestic companies such as Alibaba and Ele.me as the mainstream framework, while most foreign companies use React and Angular.

The above is a detailed discussion of the simple introductory knowledge of Vue. For more information about getting started with Vue, please pay attention to other related articles on 123WORDPRESS.COM!