The pitfalls encountered when learning Vue.js

Ranking in no particular order

Recently, it seems that he has only posted some blogs about life and complaints. If he doesn’t update anything related to technology, some people might think that he is being lazy again.

Okay then, I'm going to start pretending.

Class void pointing

It is a kind of error similar to the null pointer. It will not report an error on the console and is very difficult to find.

resp.data.user.avatar

//If the user is null, this call will not report an error and will not execute further. It is very tricky. //If you want to judge the avatar, do this if (resp.data.user && resp.data.user.avatar) {
 //do...
}

ES6 Arrow Functions

There is also a big difference between arrow functions and non-arrow functions

//Ordinary anonymous function writing api()
.then(function(resp){
 this.count()
 //Note that this is not a normal count and will be undefined
})


//ES6 arrow function api()
.then(resp => {
 this.count()
 //Nothing wrong here})

vuetify

This is a UI framework based on Google's Material design language that can run on Vue.js.

It’s just that the installation method is a bit special, and its plug-in installation method is also special.

For example, vuetify's dialog

import VuetifyDialog from 'vuetify-dialog'
import vuetify from './plugins/vuetify';

Vue.use(VuetifyDialog, {
 context: {
 vuetify
 }
})

This means that when you write UI, you have to program for Google. (Although other backend languages ​​are similar)

vue-cli

If you are creating a new project and the project is not particularly large.

I highly recommend you use vue-cli to create it, to put it simply this will improve the b style.

Stop talking nonsense and see the picture

vue create your_project_name

vue ui

vue ui will open a visualization page like the one above.

Then import the project created by vue-cli and it will be the same as the picture above:)

Asynchronous and synchronous

Actually, I had a very stupid idea before.

After the user completes the form, it is immediately verified with the server and the result is refreshed on the UI.

But refreshing the UI requires a synchronous operation.

I just kept trying to figure out how to turn the asynchronous operation of axios into synchronous one.

If it is the previous jQuery, it is very simple. You just need to change the aysnc attribute in it.

However, every time you send a request, the browser will prompt in the console that XHR synchronous requests are not recommended.

Why? Because the page in the browser is single-threaded. If your request is synchronous, each request will cause the page to be stuck for a certain period of time.

So I finally changed to a step-by-step verification method to make all requests asynchronous.

Run and deploy

If you develop locally

Running serve (or dev for some projects) will open a port number for you to access the user interface and make near real-time UI adjustments.

If you want to deploy it online, you need to execute build first, which will generate static files in the output directory.

Deploy these files to the server like this:

• nginx
• caddy

Here I highly recommend caddy, which is a server developed based on golang. It is lightweight to deploy and comes with a management API. It supports Http2 very well and supports http3.

TIPS

Here are just some of the projects that I just started playing with. More problems will be encountered in the subsequent development.
For example, refreshing between pages, and so on.

So there will be another chapter soon.

Hope this helps.

The above is the details of the pitfalls encountered in learning Vue.js. For more information about the pitfalls encountered in learning Vue.js, please pay attention to other related articles on 123WORDPRESS.COM!