I. Custom V-Model

(1) Concept:

  • The V-model can be thought of as the syntactic sugar of the value+input method.

  • The component’s V-model is the syntactic sugar for the value+input method.

  • V -model bindings include: input, checkbox, Select, Textarea, radio

(2) How to implement custom V-Model, detailed attached code parent component:

Child components:

Second, $nextTick

  • Vue is asynchronous rendering
  • Asynchronous rendering: DOM does not render immediately after vue data changes
  • The $nextTick is triggered after DOM rendering to get the latest DOM node

Third, slot.

This example applies only to named and scoped slots: Named slot: a slot with a specific name that specifies which slot to replace the contents of the template. If multiple slots are required, you can use a special feature of the

element named to define named slots

Scope slot:It is understood that a scope slot in a child component can provide data for the display of a slot in a parent component

The parent component:

Child components:

Dynamic components

  • :is = “component-name” usage
  • Need to dynamically render the scene according to the data. That is, the component type is uncertain

How does VUE load components asynchronously

  • The import () function
  • Load on demand, load large components asynchronously

How does Vue cache the keep-alive component

  • Cache components
  • Frequent switching, no need to repeat the rendering
  • Vue common performance optimizations

Seven, mixin

  • Multiple components have the same logic, pull it out

  • Mixins are not perfect solutions, and there are problems

    • Variable sources are not clear, which is not conducive to reading
    • Multiple mixins can cause naming conflicts
    • Mixins have a many-to-many relationship with components, resulting in high complexity

  • Vue3’s Composition API aims to address these issues

MixinDemo. Vue:

mixin.js