Some suggestions on Vue code readability | comments are rewarded

suggestions vue code readability comments


This article has participated in the review and gift drawing activity , Nuggets Badge *2, Comment on relevant content to participate in the lucky draw   Check the details

Preface

Recently, I went into the pit Vue project , It feels like falling into the ancestral shit mountain , Poor readability , Not to mention maintainability . So I'd like to take this column to mention a few points about Vue Suggestions for code readability , If you think it's useful, give it a compliment , If you think the suggestion is unreasonable, comment and criticize , There are better suggestions. Welcome to comment and add .

One 、 Make good use of components to make the code more organized

Never put the implementation code of a page in one .vue In file , Unless this page is very simple , Otherwise, this .vue The code in the file will be long and smelly .

Vue The purpose of providing components is not just to reuse , It can also be used to split code , Even making good use of components can optimize the rendering and updating speed of pages . This is because Vue When the page is rendered and updated, the components in the page will not be updated , Unless the component props perhaps slot The referenced data changes .

You can use the following steps to put a Vue The page is divided into components to make the code more organized

1.1、 extract UI Components

How to define UI What about the components ? It is recommended to distinguish by whether the server data is processed or not UI Components and business components . For example, load pop-up window 、 The second confirmation pop-up window 、 Message prompt box and so on belong to UI Interactive components .

take UI After the component is extracted , You can put UI The interactive code is separated from the business interactive code . Remember not to UI Write business code in component , such UI Components will not be reusable .

Take a counterexample , Add the business code to be processed after secondary confirmation in the secondary confirmation pop-up window , Lead to UI Components will not be reusable . We can imitate ElementUI The secondary confirmation pop-up window is called to implement a secondary confirmation pop-up window component .

this.$confirm(message, title, options)
.then(res =>{})
.catch(err =>{})
 Copy code 

In this way, the business code can be written in then In the callback function of , The core implementation code of the component is as follows :

//confirm.vue
<template>
<div v-show="show">
//...
<div @click="ok"></div>
<div @click="cancel"></div>
</div>
</template>
<script>
export default {
data(){
return {
show: false,
}
},
methods:{
ok(){
this.show = false;
this.resolve();
},
cancel(){
this.show = false;
this.resolve();
},
}
}
</script>
 Copy code 
//index.js
import Vue from 'vue';
import options from './confirm.vue';
const Confirm = Vue.extend(options);
let confirm = undefined;
const ConfirmInit = (options = {}) => {
return new Promise((resolve, reject) => {
options.resolve = resolve;
options.reject = reject;
confirm = new Confirm({
el: document.createElement('div'),
data: options
})
document.body.appendChild(confirm.$el);
Vue.nextTick(() => {
if(confirm) confirm.show = true;
})
return confirm;
})
}
Vue.prototype.$confirm = ConfirmInit;
 Copy code 
//main.js
import 'components/confirm/index.js';// Global registration secondary confirmation pop-up window confirm Components
 Copy code 

1.2、 Extract business components by module

A page can be divided into multiple areas , Like the head 、 Bottom 、 Sidebar 、 List of goods 、 Member list, etc , Each region can be used as a module to extract business components .

1.3、 Extract functional components by function

Extract business components by module , At this time, the business component may still be very large , Therefore, the functional components should be further extracted according to the function .

The functions are big and small , We should pay attention to several principles :

  • Too simple functions are not extracted

    For example, a collection function , Just request an interface , Don't extract functions like this . Only the functions of logical operations with a certain complexity can be extracted .

  • Single function , A functional component handles only one business .

    For example, a file reader component , There is a need , It is required to automatically collect the file after it is opened , So where to write the collection logic code ?

    Maybe you write the collection logic code in the method of listening for the successful opening of files in the component without thinking about it , After a while , The requirement should be added to the reading record first, and then click the collect button to collect , When you modify the code in the component, you find that another page also references this component , Therefore, an additional parameter should be added to the component to distinguish business scenarios , Business scenarios are superimposed as requirements change , Various judgment logic will be added to the code of the component , Over time, it becomes long and smelly , Obviously, this practice is not allowed to .

    The correct approach is to customize an event on the component label on-fileOpen-success, use handleFileOpenSuccess Function to listen for this event .

    <fileReader @on-fileOpen-success="handleFileOpenSuccess"></fileReader>
     Copy code 

    Execute in the method of listening for the successful opening of the file in the component this.$emit('on-fileOpen-success',data) Trigger this event , among data You can pass file information out , stay handleFileOpenSuccess Function to handle business interactions such as collecting or adding history records and then collecting . This approach makes the file reader component single .

  • Functional components should contain as few as possible UI part ,UI Partly with slot Slot incoming , This makes the component more pure , More reusable .

    For example, the upload icon of the upload component , It's impossible to follow UI When the design changes, add an upload icon to it , You can use slot The slot passes the upload icon into .

    //upload.vue
    <template>
    <div>
    <slot name="icon"></slot>
    </div>
    </template>
     Copy code 
    //index.vue
    <template>
    <div>
    <upload>
    <template #icon>
    // Upload icon
    </template>
    </upload>
    </div>
    </template>
     Copy code 

Two 、 utilize v-bind Make component properties more readable

If you want to treat all the attributes of an object as prop Incoming components componentA, You can use... Without parameters v-bind. for example , For a given object params

params: {
id: 1,
name: 'vue'
}
 Copy code 

Before optimization

<componentA :id=params.id :name="params.name"></componentA>
 Copy code 

After optimization

<componentA v-bind="params"></componentA>
 Copy code 

3、 ... and 、 utilize a t t r s And attrs And listeners To encapsulate third-party components

1、$attrs

In encapsulating third-party components , There is always a problem , How to use the properties and events of third-party components through encapsulated components .

Like encapsulating a elementUi In the component Input Input box components myInput, When an error is entered, an error prompt is displayed below the input box .

myInput The component code is as follows :

<template>
<div>
<el-input v-model="input"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
props:{
value:{
type:String,
default:'',
},
errorTip:{
type:String,
default:'',
}
},
data(){
return {
}
},
computed:{
input:{
get(){
return this.value
},
set(val){
this.$emit('input',val)
}
}
}
}
</script>
 Copy code 

This call myInput Components , among errorTip Enter an error prompt for the input box .

<myInput v-model="input" :errorTip="errorTip"></myInput>
 Copy code 

If you want to in myInput Add a... To the component disabled Property to disable the input box , How to achieve it ? Most students do this

<template>
<div>
<el-input v-model="input" :disabled="disabled"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
props:{
//...
disabled:{
type:Boolean,
default:false
}
},
//...
}
</script>
 Copy code 

After a period of time, I will be in myInput Add... To the component el-input Other properties of the component ,el-input The total number of components is 27 More than a , What should I do , One by one prop Pass in , This is not only poor readability, but also cumbersome , It can be used $attrs One step in place , Let's take a look first attrs The definition of .

$attrs: Contains inaction in the parent scope prop Be identified ( And get ) Of attribute binding (class and style With the exception of ). When a component does not declare anything prop when , This will include all bindings for the parent scope (class and style With the exception of ), And through v-bind="$attrs" Incoming internal components

<template>
<div>
<el-input v-model="input" v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
 Copy code 

It is not enough , You have to inheritAttrs Option set to false, Why? , Take a look at inheritAttrs The definition of options is clear .

By default, the parent scope is not recognized as props Of attribute binding (attribute bindings) will “ Back off ” And as ordinary HTML attribute Apply to the root element of the subcomponent . When composing a component that wraps a target element or another component , This may not always be in line with expected behavior . By setting inheritAttrs by false, These default behaviors will be removed . And by $attrs You can make these attribute take effect , And through v-bind Explicitly bound to non root elements . Be careful : This option does not affect class and style binding .

Simply speaking , hold inheritAttrs Set to false,v-bind="$attrs" To take effect .

<template>
<div>
<el-input v-model="input" v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props:{
value:{
type:String,
default:'',
},
errorTip:{
type:String,
default:'',
}
},
data(){
return {
}
},
computed:{
input:{
get(){
return this.value
},
set(val){
this.$emit('input',val)
}
}
}
}
</script>
 Copy code 

So you can clearly el-input The properties and properties of the component myinput The properties of components are distinguished , Component's props The readability of options is greatly improved .

2、$listeners

So how to achieve in myIpput Use... On components el-input What about the custom events on the component , Maybe your first reaction was this.$emit.

<template>
<div>
<el-input
v-model="input"
v-bind="$attrs"
@blur="blur"
>
</el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
//...
methods:{
blur(){
this.$emit('blur')
}
}
}
</script>
 Copy code 
<myInput v-model="input" :errorTip="errorTip" @blur="handleBlur"></myInput>
 Copy code 

el-input The components are 4 A custom event , Not much , If you encounter custom events, more third-party components , do , Can you add them one by one , Not only will it add a bunch of unnecessary methods, And the readability is poor, it is easy to communicate with myInput Self methods Mixed in with . You can actually use $listeners One step in place , Let's take a look first $listeners The definition of .

$listeners: Contains... In the parent scope ( Not included .native Decorator's ) v-on Event listener . It can go through v-on="$listeners" Incoming internal components .

<template>
<div>
<el-input
v-model="input"
v-bind="$attrs"
v-on="$listeners"
>
</el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
//...
}
</script>
 Copy code 
<myInput v-model="input" :errorTip="errorTip" @blur="handleBlur"></myInput>
 Copy code 

stay myInput In the component, as long as el-input Add... To the component v-on="$listeners", You can go to myInput Use... On components el-input Component custom events .

The way of drawing prizes

Premise :

  • By the end of 9 month 10 Japan , If the comment area exceeds 10 Human interaction ( Not including the author himself ), The author can draw in his own name to give out the Nuggets badge 2 gold ( Nuggets officials bear )

  • Commentators can't be trumpets , such as LV0, No historical developments , Or just like an author's number ;

  • Comments cannot appear 「 Trample 」「 Support 」「 Welcome back 」 Etc. or similar comments ;

The way of drawing prizes :

All qualified commentators , Random sampling 2 name .

Lottery tools :

choujiang.wiicha.com/

Opening time :

2021 year 9 month 9 Japan 21 spot

版权声明
本文为[Heart refining in the world of mortals]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210909111329225x.html

  1. Monthly salary 10K yard farmer, job hopping to 40K architect, summary of technical learning Roadmap
  2. Manually compile and deploy LNMP environment (centos7.5 + nginx-1.18.0 + mysql-5.7.30 + php-7.4.14)
  3. The drama "light" of the Republic of China premiered, with a dismal audience rating of less than 0.4, creating the worst audience rating of Hunan Satellite TV!
  4. It is said that Ericsson will cancel Nanjing R & D center
  5. Question d'entrevue commune de Spring Cloud, où est l'avenir de 2021 Java?
  6. Sharedpreferences Replacement - mmkv Integration and Principles, 27 years old Preschool Development
  7. Différence entre TCP et UDP, développement frontal mobile
  8. The whole process of mybatis dynamic proxy implementation of spring series? The correct answer rate is less than 1%
  9. Ajax Foundation
  10. Développement Android comprendre ces entrevues naturelles sans peur, Android Knowledge System
  11. L'expérience de l'entrevue d'embauche de l'école Java peut vous aider à obtenir une entrevue.
  12. Leetcode pinceau question 989 - simple - addition d'entiers sous forme de tableau
  13. Children of the Qiao family: after reading Qiao Zuwang's last selflessness, we can recognize his simple father's love
  14. Partager une petite expérience d'entrevue et obtenir un produit
  15. Solution de capture de paquets https sur la plate - forme Android et analyse des problèmes, Android développe un apprentissage complet
  16. Young people are the first choice for transportation. These hatchbacks suck countless powder. Is it your dish?
  17. "Net red granny" over 70 has countless circle powder by wearing, and is more fashionable than young people
  18. Méthodes de fonctionnement des tableaux couramment utilisées en javascript
  19. Summary of Vue knowledge points
  20. 10 septembre: deuxième visite d'une journée à Yantai, Shandong - vue nocturne de Chaoyang Street, Zhifu District
  21. Front and back end data interaction (V) -- what is Axios?
  22. Windows configures nginx to boot automatically
  23. Des questions d'entrevue communes à Tomcat pour discuter de votre compréhension de la technologie de verrouillage distribué,
  24. JS handscrap, Classic interview question, web front end Development Process
  25. Android 400 questions d'entrevue pour vous aider à entrer dans l'usine, un tour pour vous apprendre à comprendre netty
  26. Développement et projet d'application Web statique côté PC
  27. Recommandé pour le tutoriel Spring Framework, 2021 dernière question d'entrevue d'embauche de la société aiqiyi Java,
  28. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  29. [partage d'expérience de travail], 2021 les dernières questions d'entrevue Java de Baidu, Headlines, etc.
  30. Lisez l'analyse de 497 questions pour l'entrevue d'ingénieur principal Android et vérifiez les lacunes.
  31. Grâce à cette collection de questions d'entrevue d'automne, le salaire de saut d'emploi et l'entrevue de développement audio et vidéo ont doublé.
  32. Prenez d'un coup l'offre de Tencent meituan et jetez un coup d'oeil à cette copie de l'entrevue de printemps!
  33. L'expérience et l'expérience d'un Maverick Java en matière d'entrevue sur les MTD, l'expérience de l'entrevue d'embauche du printemps Java en 2021,
  34. Vue中自定义列表复选框和全选框-案例
  35. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  36. CSS text overflow ellipsis summary, as you wish
  37. C'est la mode la plus étrange que j'ai jamais vue.
  38. Cases à cocher et toutes les cases à cocher de la liste personnalisée en vue - CAS
  39. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  40. Vue3.0 using Gaode map to obtain longitude and latitude information
  41. Front end interview daily 3 + 1 - day 877
  42. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  43. React realizes the function of copying pictures with one click
  44. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  45. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  46. Résumé de l'entrevue Android de Dachang, carte technique Android
  47. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  48. Le résumé de l'entrevue Android de Dachang est en retard
  49. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  50. Jquery Tools Methodology collation, Sharing a little interview Experience
  51. Jquery plug - in urianchor, app front end Development
  52. $in jquery, Visualized Web Development Tool
  53. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  54. vue v-if未生效问题
  55. vue动态改变组件外部元素样式
  56. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  57. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  58. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  59. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  60. vue動態改變組件外部元素樣式