Front end, javascript, vue.js

Links to blog articles:Vue

VueAndAngularReact.jsWhat are the similarities and differences?

AndReactSame as:

  • All usedVirtual DOM
  • Responsive and componentized view components are provided.
  • Focus on the core library while leaving other functions such as routing and global state management to the relevant libraries.

AndReactThe difference between:

  • Responsive Rendering of Components

    • ReactWhen the data state of a component changes, it will re-render the entire component subtree with that component as the root. AndVueNot only to render components that need to be rendered.
  • HTML+CSSThe preparation of

    • ReactpracticalJSXGrammar, willHTMLCSSAndJSMixed writing; AndVueWhat is used istemplatesTemplate mode, fully integrated with classicWebTechnology.

AndAngularThe difference between:

  • AndAngular 1In contrast,VueThe performance of the is even better.AngularPerformance will followwatcherThe increase and slow down, andAngularSome of themwatcherAnother update will be triggered so that the “dirty check cycle” may run multiple times.
  • AngularIn fact, it must be usedTypeScriptTo develop, andAngularForTSThe support is very comprehensive, andVueFor the time beingTSOur support is still in the improvement stage.
  • VueThe size of the is smaller, one containsvuex + vue-routerTheVueProject (30kb gzipped) compared to using these optimizedangular-cliThe generated default project size (~130kb) is still much smaller.

Vuehit the targetMVVMModel?

  • VueIs data-driven,VueI willDOMAnd once the binding is created,DOMAnd every time the data changes,DOMIt will change accordingly.
  • ViewModelYesVueThe core of it isVueAn example of.VueAn example is an action on aHTMLOn the element, thisHTMLThe element can bebody, can also be someidThe element referred to.DOM ListenersAndData BindingsIt is the key to realize two-way binding.DOM ListenersMonitor all pagesViewLayerDOMThe change of elements, whenViewChanges have taken place,ModelThe data of the layer changes accordingly;Data BindingsMonitorModelLayer data, when data changes,ViewLayeredDOMElements change accordingly.

v-ifAndv-showWhat is the difference between instructions?

  • v-showWhether the corresponding value istrueOr ..false, corresponding toHtmlElements will all exist in the browser’s document; Andv-ifIf it isfalseIf so, it is not directly in the document.

How to preventVueDo binding events in do not bubble?

  • You can use Event Modifiers to handle event bubbling, such as:v-on:click.stopPrevent the event from bubbling orv-on:submit.preventBlock default events.

How do parent and child components communicate?

  • InVueIn, the scope of each component instance is isolated. This also means that the data of the parent component cannot (and should not) be directly applied within the template of the child component. Parent component passes throughPropsData is passed to subcomponents, which pass throughEventsPass data to the parent component.

How do non-parent-child level components communicate?

  • In a simple application scenario, you can use an emptyVueThe instance serves as the central event bus.
  • In complex cases, you can consider usingVueThe state management mode provided by the government-VuexTo manage.

What are dynamic components? What is its function?

  • By using reserved<component>Element that is dynamically bound to itsisFeature, we allow multiple components to use the same mount point and switch dynamically.
  • In addition,VueAlso provided arekeep-alveInstructions.keep-aliveThe instruction allows the switched component to be kept in memory and its state to be preserved or to avoid re-rendering.

Why is thedataThe value of the property must be a function?

  • Because if a component is referenced more than once, ifdataThe value of is aObjectIf so, then due toObjectIs a reference type, so even if the component is referenced many times, but it actually operates on the same object, eventually causing all locations referencing the component to be displayed synchronously.