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

This article mainly explains "what are the Vue skills to improve development efficiency?" the content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the Vue skills to improve development efficiency?"

Use of components (component)

The modularization provided by vue is undoubtedly an artifact to improve development efficiency, and it also provides great convenience for later code optimization and maintenance.

Introduction to the use of components

Vue provides component functions, and components can be divided into global components and non-global components. The difference is that the global component you can directly use the custom html in the .vue file. A non-global component must be defined in the object of Vue. Components introduces this component.

Local component reference mode

Import A from'@ / component/A' export default {data () {}, components: {A}}

Global component reference mode

/ / index.js file import A from'@ / component/A' A.install = function (Vue) {Vue.component (A.name, A)} export {A} / / main.js file import {A} from'. / components/index' Vue.use (A)

Here is an optimization tip for introducing global components. It is troublesome to maintain both index.js files and main.js files in the above way. You can only maintain the index.js file by using the following code

/ / index.js file import A from'@ / component/A' A.install = function (Vue) {Vue.component (A.name, A)} function InstallAll (Vue) {Vue.use (A)} export {A, InstallAll} / / main.js file import {InstallAll} from'. / components/index' InstallAll (Vue)

Reuse of CAPTCHA components

Mobile phone number + CAPTCHA to log in has become one of the mainstream login methods. However, there are many places for a project to use CAPTCHA, such as login, registration, password change, and information reconfirmation. It is troublesome to rewrite CAPTCHA logic everywhere, so CAPTCHA needs to be abstracted from the component.

CAPTCHA usually docks multiple interfaces, or one interface, but needs to pass the type to get the CAPTCHA. These interfaces usually require a mobile phone number. Therefore, the CAPTCHA needs to receive two parameters: phone and type. You can complete the click operation and read the second operation on your own, without having to have any impact on the place referenced.

/ / at last, when each page is called, it looks like this.

Reuse of collection components

The collection function is used more frequently than CAPTCHA, and of course it is more difficult.

Like my recent big data project, users can collect videos, music and topics. At the same time, they appear in many places, such as video list, music list, topic list, video details, music details, topic details. Will have the function of collection, not abstracted into a component of the same logic to write several places later maintenance is very difficult.

Collections like this usually require an id, whether or not the collection status, and a series of jump functions after completing the collection. So you need two parameters: id and status. And complete callback method

/ / at last, when each page is called, it looks like this.

I mentioned above that I can collect music, videos and topics, obviously three collection interfaces. Do you want to write three collection components? Of course not, since it belongs to the collection function, it is naturally a component done. Just add another type parameter to distinguish it.

/ / at last, when each page is called, it looks like this.

So every time I use the collection, I just need to copy this line of code.

Summary

The third-party UI library will introduce us to a lot of useful components, such as webcast pictures, forms, and picture uploads. But these are components that have nothing to do with the business, and we are sure to encounter a lot of repetitive functions when we do the project. In order to make the code easy to maintain, you must have good component abstraction ability. Make good use of component function.

The CAPTCHA and collection functions mentioned above are used frequently, and I usually treat them as global components (individuals will regard components that have been used more than 1 as global components), but some pages are very complex. It must be troublesome for a page to find tens of thousands of lines of code later. It must also be split so that a component is not written to the end. In view of this situation, I usually use local components to maintain and improve the simplicity of the interface.

Skills of using filters

Data filtering is undoubtedly one of the important functions of vue. Like the filtering of time and numbers, it is too frequent. Mastering filter will undoubtedly greatly improve the happiness and maintainability of the code.

Introduction to filter usage

Like component, filter is also divided into global filters and local filters.

Global filter

Vue.filter ('date', function (value1, value2,...) {result after return' processing'})

Local filter

Export default {filters: {date (value1, value2,...) {return 'result after processing'}

How it is used (whether global or local):

/ / without parameter {{value1 | date}} / with parameter {{value1 | date (value2,...)}} / / multiple filters {{value1 | filter1 | filter2}}

Note: the first parameter is the value before the pipe character (|)

Common usage scenarios

I mostly use global filters. Like local filters, one can directly deal with the original data, and the other is to find that the local filters used in the early days have been upgraded to global filters. If you have a good local filter scene, welcome to comment.

Date processing. The data passed at the back end is either of the string type 2019-03-14 09:00:00. Either it is a timestamp type, but the interface usually shows only part of it, such as only the year, month, day, or day of the month. So there is a global date filter, happy to cry. This filter is best to support both formats. If you don't know,

Digital processing. It is common to keep a few decimal places, to replace more than a few places with the letter w, or the Chinese character "100 million".

The above two are the ones I have encountered the most, and you are welcome to comment and add.

Summary

Don't be soft where you should use filters. If there is more than one place, it should be written as public. Otherwise, if the logic is not handled correctly in the later stage, you don't know where the same processing logic is used, which can easily lead to the omission of bug.

Mixins usage scenario

This attribute is also divided into global and local use, and global use will affect all subsequent components. Therefore, I do not recommend using global mixins in business code. And feel that the use of global mixins is not conducive to code maintenance, you want to suddenly use a function in template, the first idea must be to look in methods, it is very difficult not to find it. And it is also quite destructive, so I use local injection. Let others know that mixins is used here, and if he encounters some strange situations, he knows that there is mixins here and will take the initiative to check the relevant code.

This attribute I use most often is when referencing a third-party list library, it usually has a formatter formatted data property. You can't use filters here. But the processing of data like lists is very repetitive, so it is much more convenient to inject a mixins.

Some techniques used in third-party libraries

Some techniques used in router

When the hook function beforeEach makes a route jump, it executes beforeEach first. So you can decide whether you can jump when the route is redirected. The common scenario is to determine whether the user is logged in and whether he or she has permission for a certain page.

/ / to: Route: destination route object to be entered / / from: Route: the route from which the current navigation is leaving / / next: Function: be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method. Next (): proceed to the next hook in the pipe. If all the hooks are finished, the navigation status is confirmed (confirmed). Router.beforeEach ((to, form, next) = > {})

Some techniques used in vuex

The trick of action is that action can execute methods asynchronously. I usually encounter this situation in my business: get some information, but this information interface is used by multiple pages, and it is really troublesome to deal with this interface on each page. So it is very happy to share this part of the information when it is introduced into vuex. Action is used because it is asynchronous. Provide a reference code:

Actions: {getMemberShip ({state, commit}) {return new Promise ((resolve, reject) = > {if (! state.memberShip) {/ / memberShip is the ajax request method memberShip (state.userInfo) .then (res = > {commit ('setMemberShip') Res) resolve (res)}) .catch (err = > {reject (err)})} else {resolve (state.memberShip)}})},}

This is a situation that I define to get a membership package, which is used on many pages of the membership package. But it changes frequently, and there is no need for users to load it as soon as they log in, so use action to save it. If there is no such value, the ajax request is executed, and if there is one, the result is returned directly.

Echarts

Echarts chart world's big brother, support N multiple charts, configuration items said thousands of should not be exaggerated. However, it is precisely because of a variety of configuration items that give you more freedom to configure. What are the tricks of using echarts?

Quickly locate configuration items

Echarts contains titles, legends, cue boxes, annotations, markings. And other controls, adjust the whole style is really difficult to find. But now the official has added a new terminology quick check manual. Before, I always went to the old official to check it, but now it is blessed that the new official has this thing. I need to adjust the effect of that control in the above point to take me to the corresponding API is almost easy to fly.

Optimizing the project code is not a special data presentation project, and there are not many chart types used. Usually a chart is used repeatedly, while echarts configuration of a chart is usually dozens of lines of code. Take this configuration item out and pass in only one parameter code how neat it is. This implementation is very simple. If you haven't already done so, it is recommended to optimize your project immediately.

Axios

Axios is a third-party control similar to ajax. So I also have some ideas to communicate with you.

I came across a hole in my development. The official document said that IE was supported, but IE did not support it at all. Because the underlying axios is written in promise, IE does not support this attribute at all, so you need to introduce profill. The solution is to introduce babel-polyfill

/ / step 1 npm install-- save babel-polyfill / / step 2 add the following to the vue.config.js file: module.exports = {configureWebpack: config = > {return {entry: {app: ['babel-polyfill','. / src/main.js']} Thank you for your reading The above is the content of "what are the Vue skills to improve development efficiency?" after the study of this article, I believe you have a deeper understanding of what Vue skills to improve development efficiency have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.