Vue components

  vue.js

Component system

Components can be extendedHTMLElement that encapsulates reusable code.

Core components of vue.js:

  1. Template-The template declares the mapping relationship between the data and the DOM finally presented to the user.
  2. Initial data-Initial data state of a component. For reusable components, it is usually a private state.
  3. Accepted external parameters (props)-Data is transferred and shared between components through parameters. Parameters default to one-way binding (from top to bottom), but can also be explicitly declared as two-way binding.
  4. Methods-Changes to data are generally made within the method of the component. Throughv-onInstructions bind user input events to component methods.
  5. Lifecycle hooks-One component triggers multiple life cycle hook functions, such ascreatedattacheddestroyedWait. In these hook functions, we can encapsulate some custom logic. Compared with traditional MVC, this can be understood asControllerThe logic of is scattered among these hook functions.
  6. Private assets: Vue.js will be user-definedinstructionsFilterComponentThese are collectively referred to as resources. Since globally registered resources are prone to naming conflicts, a component can declare its own private resources. Private resources can only be called by this component and its subcomponents.
  7. In addition, components within the same component tree can also pass throughBuilt-in event apisTo communicate. Vue.js provides a complete API for defining, reusing, and nesting components, allowing developers to build the entire application interface with components like building blocks. The feasibility of this idea has also been verified in Facebook’s open source React.

Single File Component Format Based on Building Tools

Vue.js’s core library only provides the basic API and does not impose too many restrictions on how to organize the file structure of the application. However, it is recommended to use when building large-scale applications.Webpack+vue-loaderThis combination makes component development more efficient.

Webpack is an open source front end developed by Tobias Koppers.Module building tool. Its basic function is to package several JavaScript files written in module format into one file, and support CommonJS and AMD formats at the same time. But what makes it different is that it provides a powerful loader API to define preprocessing logic for different file formats, so that we can use CSS, templates, and even custom file formats as JavaScript modules. WebpackLoader-basedA large number of advanced functions can also be realized, such asAutomatic block packaging and on-demand loadingAutomatic Location of Reference to Picture ResourcesAccording to the size of the picture, decide whether to use base64 inline or not.Module Hot Replacement during DevelopmentAnd so on, it can be said to be one of the most competitive solutions in front-end construction.

Other characteristics

Vue.js has several other features worth mentioning:

  1. Asynchronous batch DOM update: when a large number of data changes, all affectedwatcherWill be pushed into a queue and eachwatcherOnly push the queue once. This queue will execute asynchronously at the next “tick” of the process. This mechanism can avoid redundant DOM operations caused by multiple changes of the same data, and can also ensure that all DOM write operations are executed together to avoid layout that may be caused by DOM read-write switching.
  2. Animation systemVue.js provides a simple but powerful animation system. When the visibility of an element changes, users can not only define the corresponding CSS very simplyTransitionOrAnimationEffect, you can also use rich JavaScript hook function for lower animation processing.
  3. expandability: In addition to customizationinstructionsFilterAndComponentVue.js also provides flexibilityMixin mechanismTo allow users to reuse common features in multiple components.

Use Prop to transfer data

The scope of the component instance is isolated. This means that the data of the parent component cannot (and should not) be directly referenced within the template of the child component. In order for the child component to use the parent component’s data, we need to use the child component’spropsOptions.

Subassemblies to be used explicitlypropsThe option declares the data it expects to obtain.

Vue.component({
        props: ['message'],
        template: '<span>{{message}}</span>'
    });

Parent-child component communication

Vue subcomponents can communicate with parent components through events. Sending messages to parent components is done bythis.$dispatchAnd sending messages to subcomponents is done bythis.$boardcast.

The Implementation Principle of Data Binding

Vue calls bidirectional binding reactive and can be translated into responsive data binding. The interior is defined through ES5getterAndsetterMethod is implemented, so browsers IE8 and below are not supported. This implementation has two fallibility points:

  • If adding and deleting attributes directly on data cannot be detected, deletion is generally not possible, but it may be added dynamically, which should be passed at this time.vm.$set(“name”, value)To add it.
  • Changes inside the object cannot be detected, i.e. only changes in data attributes can be detected, ifdata.aIs an object, thendata.a.b = 1This change cannot be detected. In this case, a new object should be created and assigned to data.a

Asynchronous update mechanism

Vue updates DOM asynchronously! This asynchrony takes place in an asynchrony queue, but this asynchrony queue will take place in the currentEvent LoopIf you modify Data, it is wrong to immediately query DOM. DOM has not been updated at this time. The correct way is to do this:

vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

Or this:

vm.$nextTick(function () {
 this.$el.textContent === 'new message' // true
})