Componentized programming of Vue.js

This article is organized from the rare earth founder Yin Ming in the Coding line sharing Beijing station on the contents of Vue.js do share it

I am very happy to have a chance to chat with you today about Vue.js. Before sharing, what I want to tell you is that Vue.js is a front-end framework. This is very important.

Why didn’t I choose React? React is more “heavy” than the entire development business, and the way it is implemented is actually quite advanced.

Although I don’t hate React, because Vue is simpler and lighter, it may be a better choice for some relatively simple teams.

In this sharing, I will first introduce the history of Vue.js, and then I will focus on some of the componentized programming experiences that Nuggets have summarized in development. Finally, I will talk about how we use Vue.js.

Tell me about myself:

First of all, introduce Vue js, which is a very “tall” front-end library.

The purpose of the library is to be able to write the most code in the least amount of time and get the entire project to work before the product manager finds you in trouble. I think this is what a good library has.

A front-end framework such as MVVM is a design pattern in itself. This is an idea that can solve some common problems with the same method. It is an abstract concept. The ViewModel is in the middle of this, which is equivalent to a black box.

What if we don’t use MVVM?

For example: When the website data changes, we need to manually do something and re-render the UI shown in a certain part. This can be a very troublesome process. But if we use the MVVM framework, when the data changes, this part of the UI change will be handled by this framework. This is equivalent to creating a “wheel”. We can run on it. This is MVVM. .

What is a front-end framework? It seems to me that there is a very important “point” to call the front-end framework. A small “wheel” or small tool cannot be called the framework layer. It can only be called the tool layer.

First of all, it must have some agreed code way to write;

The second is to write it easily. Codes such as business logic that are written “naked” often require writing two or three hundred lines of code to accomplish a trivial matter in terms of crawling, data changes, etc. If there is a framework, writing five lines can be done.

Third, the code needs to be easy to maintain. Because of the use of a framework, the code will have some specifications and structures. Through these specifications and structures, we can easily maintain Code Base of the code.

There is also a valuable framework. As the business logic of websites continues to be complicated, this framework must still exist.

For example, when the business logic is quite complex and complex to hundreds of page components, many frameworks will soon die. But using a good framework gives me the best practice to solve this problem. It is actually through some specifications that you will not lose or get lost in the more complex business logic.

This is also a guideline for us to use the framework because Nuggets The website is very complicated, and our front-end business has become more and more complex, which makes the front-end library, performance has become one of the points we care about.

The above are some of the features that I think a good front-end framework should have.

Next I will show you a concise code block to introduce Vue.js.

As you can see, the left side of the code block is the UI layer and the right side defines the State. By simply entering the two words, you should understand it.

This relatively brief code allows us to do something and see the output of information. In fact, we will ask one more question: How is it actually achieved?

Many people do not care about this when using the framework, but I still care about it.

The principle of this code block implementation is to take advantage of a particularly important attribute of the ES5. However, it does not support IE8 browsers of the following versions:

Assuming that A is an Object, we can define a lot of things when we define a value below it. The most important is the two functions in the figure.

Whenever we take the value of A.B, this function is called and a value is called through this function. This function will be called when the Set value is assigned, so that the function will be handled when the value is called.

With these contents, I would like to say that Vue.js is actually not complicated. It does this by calling a very primitive function, but there are many code-level optimizations. This is a great place for it.

In addition, every time we mention the framework, I will definitely mention the activity of this framework. Why? Because the activity of the framework represents the completeness of the framework.

What is a complete framework, in addition to the good features that a framework I just mentioned should have, it should also have an active community to solve the user’s problems; similarly, it should have its own test place, with constantly updated code on the edge Library place.

Vue.js has a very, very good point in my mind, and it’s also something I particularly care about. Vue.js is very sexy.

When Angular first came out, it was a framework that made many people feel sexy, but it suddenly became “Low” after more than a year.

On the contrary, Vue still gives people a very sexy impression. I think one of the reasons is that it uses various “wheels.”

Vue for me is that it doesn’t have the performance to decline or become unsatisfying over time, but also because the use of Vue’s contributions has combined it with the many features of many libraries. Of course, I’ll talk about it for a while. It is how it is combined with other wheels.

Of course, Vue has always been able to be updated in the first place, and it is still very important to remain efficient and useful.

In addition, the syntax of Vue.js is also very simple. When I first went to learn React, I thought the official website was too inhuman, and Vue’s learning curve was not as steep as the former.

I can talk loudly, Vue is faster than Angular, lighter than React, it is also a sexy combination of new “wheels.”

At the same time, its documentation official website is also very good: documentation is doing well, and the cost for users to start using it will be greatly reduced.

The most important point is also what I care about most. I just like it. I don’t care.

Next, let’s talk about the componentization of Vue. Let me talk about why we use componentization. Let’s talk about how to implement componentization and how we do it in Vue practice.

Why componentize it? Because of cool. Because the ability of any one person to process information logic is limited, when we face a complex logic, it is unlikely that we will get a whole lot at a time.

However, we can handle a small thing, and the relationship between various small things. For this reason, when we face a myriad of systems, we will certainly layer it and then componentize it. This is a reaction that we instinctively will do. I will not repeat it here.

So, how to achieve componentization?

We should analyze this problem according to the process of defining a component, loading a component, using a component, and controlling the lifecycle of a component.

This is an HTML. There is a widget that I defined. It references a JS code. The first paragraph of this code is to find the ID list, to bind this Vue two-way binding to the relevant HTML.

However, we know there is a component inside. How does this come out? We can define one with Vue.

Let me start with a more straightforward one, see a template here, put this on it. We will put this template here.

Then there is the registration, this code is installed, it becomes the bottom, this is to find the corresponding Dom file and style corresponding components and variables after finding the Exmple, which is the process to complete a simplest component.

We just saw a file like this (app.vue). We all know that the file can’t be displayed directly on the site. It must have used tools to grab the three blocks and merge them into another separate HTML or style. Let web pages show up. The webpack is used. This is a packaging tool. All the modules here are tools and have no characteristics.

What does it do?

By way of definition, when it tests a file suffix, it uses a vue loader library, which can read files like vue according to the corresponding syntax. It knows how to grab the style part of that file. It comes out and can be processed after SaaS. After it sees the template, it can grab it and reassemble it, or it can be turned into multiple files according to your needs. This is the endless choice it gives you.

It is a packaging tool, in fact, most people learn it is to define what the grammar is and so on. It is a well-used packaging tool to learn a good definition file.

This is a website. The most important piece of logic is the business code we write. There are several apps in their own App.vue, there are two more components here, and the nodemodules and webpack configuration files below.

Let’s take a look at what this configuration file looks like.

First, it will read the file, and then it will be output to the file in this folder. It uses the vue-loader. After seeing the top, it is to generate a vue, import the official library, and it will pass this component to The entire application.

There is a piece of content in the APP, and also cited the two components. This is how it is done. This is the same as the previous one.

Finally, what I talk about is very important, that is, the flow of data. The main words are three:

First, Props. What I said just now is that the parent component can give some data to subcomponents, but it needs to be defined one by one.

Second, inheritance. This is used before 1.0, and then it is abolished, that is, you can get all the elements of the subcomponents, but then this thing is not used.

The third, Vuex. In fact, this logic is similar to the previous ones, that is, the parent component can give a value to the child component, the child component can give this to the parent component, the parent component can call this to everyone, and the component can call each other to This is actually a data flow thing.

At this time we will encounter a problem: When the entire site is an application, it must know who is currently logged in.

In this case, every place must be defined, so we use a manager specifically to manage, say users. Application-level variables we have to achieve through the business. We didn’t speak very fine here, we didn’t talk about Store, etc. because the previous Liu Hui had already made it very clear.

I’ll talk about the State Manager, which makes the corresponding function call in any component want to touch the application-level State. This thing is not very long, and the concept is relatively new, now we have applied to our application, so here we have time to discuss together, just talk about these have been used in our APP.

This is a link I gave to everyone. If you want to discuss vue, you can discuss it with us. We are always summing up. Should we learn a new “wheel”?

This is very painful.

Like I was a master five years ago, I was able to reverse my code, but it is useless now. Is it not meaningless in the past?

In fact, my logic is that there are some things that are interoperable among many frameworks, code, and programs. I’ve used JS things to be useful now, or to help me learn faster now. In this process, I constantly learn new libraries and constantly learn to “wheel”, so that “wheels” and the accumulated things in this process are meaningful in the code. It is also quite handsome to try out the new library.