Because of my graduation project, I started my study of VUE, and wrote some introductory vUE little white learning article series (2018 VUE knowledge Summary (a)). I have been working for half a year now. This time, I would like to talk about the VUE in my daily practice projects. I am used to writing in ES6 for reference only

Practice the reference project, in the project for the notes I am still very satisfied with hahaha

  1. In registration, order submission and button request interface, in order to prevent repeated submission of users, our front end can carry out simple processing (function throttling or flag bit switch).
// Function throttling, when a function is called repeatedly, it is executed only once, function corrification, call one function, return another functionexport function debounce(func,delay) {
  let timer
  return function(... args) {if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      func.apply(this,args)
    },delay)
  }
}
Copy the code
  1. We define a method in a child component that calls a parent component’s sibling element to change some properties or pass data, and then calls a parent component’s sibling element.

Vue has a ref feature that gives the component an ID reference that can be used to retrieve the contents of the child components, but note that $refs only take effect after the component is rendered, and they are not reactive. Avoid accessing $refs in templates or computed properties

this.$refs.searchBox.setQuery(query)
search
search-box

  1. When we request an interface, it is best to do boundary condition handling (exception handling) to avoid the interface causing the page to stage-dead without response (line 322 of player).
getLyric() {/ / get the lyrics format this. CurrentSong. GetLyric (). Then (= > {(lyric)if(this.currentSong.lyric ! == lyric) {return} this.currentlyric = new Lyric(Lyric, this.handlelyric)//if(this.playing) {this.currentLyric.play()}}).catch(() => {// Clear this.currentLyric = null this.playingLyric =' '
    this.currentLineNum = 0
  })
},
Copy the code

Exception handling, boundary handling, we should think about the front end, we never know what the user is going to do, right

  1. mapMutationsIs themutationsMake a layer of encapsulation inmethodsWith the extension operator, you can map an object to a method name

  1. vue, in thedata.prop.computedThe data defined in it will automatically add one to themsetandgetMethod to monitor changes in data in real time and then respond toDOMIf we don’t need to monitor changes and just get data for temporary storage, we can define it directly in the method

  1. If there are two places in the same component that use the same code, we can abstract it out and use a common method. If there are two or more components that use a large amount of the same long code, we can usemixinAny method with the same name in the component will be overriddenmixinMethods inside, because the stuff inside the component takes precedence.)

Project writing Suggestions

  1. In our base component (child component), there is no logical processing. The base component value is responsible for sending events, telling the parent or external component that an event has been fired, and telling the external component that it knows everything. All the business logic processing is done in the parent, and the external component fires the event
  1. For future code backwards extensibility, we don’t write concrete numbers in concrete methods, it’s better to passconstConstant to introduce. When we introduce child components, it is best that the child components are abstracted and passed through the parent componentsuggest40 lines of the component
  1. invue-cliBuild tool, if you want to upload an empty file toGithubI need one up here.gitkeepFile, otherwise empty file is not uploadedgithubThe above
  1. tovuexWhen defining data, first think about what data we need, the lowest relevant data =>state

A mapping of getter data, usually a function, is similar to calculating properties, which can be calculated based on state or complex judgment logic

Mutation, which defines the logic by which we modify the data, and mutation-types, which defines which actions (i.e. function names) we need for mutation

  1. Project naming conventions let us know without thinking what the file does and what the function does. Management, as much as possible to make code decoupling strong, easy to manage, easy to find, easy to share. Variable naming semantics, can reduce comments, clear and easy to understand
  1. invueIn the use of ifdataThe key andmethodsObject with the same function name, there will be a warning, because the object can overwrite the object, so this situation is not allowed. Priority relationship:propsPriority >dataPriority >methodspriority
  1. invue2.0Above version, the final rendering is all throughrenderDelta function, if I write delta functiontemplateProperty needs to be compiled torenderFunction (as seen in the lifecycle diagram)

Look forward to my more, maybe write a little bad, I am a beginner, if there is a mistake, please ask more (sunseekers_). Gold seekers talk technology, Sunseekers Talk Life