Links to blog articles:Vue
React.jsWhat are the similarities and differences?
- All used
- 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.
ReactThe 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. And
VueNot only to render components that need to be rendered.
HTML+CSSThe preparation of
JSMixed writing; And
VueWhat is used is
templatesTemplate mode, fully integrated with classic
AngularThe difference between:
Angular 1In contrast,
VueThe performance of the is even better.
AngularPerformance will follow
watcherThe increase and slow down, and
AngularSome of them
watcherAnother update will be triggered so that the “dirty check cycle” may run multiple times.
AngularIn fact, it must be used
TypeScriptTo develop, and
TSThe support is very comprehensive, and
VueFor the time being
TSOur support is still in the improvement stage.
VueThe size of the is smaller, one contains
vuex + vue-routerThe
30kb gzipped) compared to using these optimized
angular-cliThe generated default project size (
~130kb) is still much smaller.
Vuehit the target
DOMAnd once the binding is created,
DOMAnd every time the data changes,
DOMIt will change accordingly.
VueThe core of it is
VueAn example of.
VueAn example is an action on a
HTMLOn the element, this
HTMLThe element can be
body, can also be some
idThe element referred to.
Data BindingsIt is the key to realize two-way binding.
DOM ListenersMonitor all pages
DOMThe change of elements, when
ViewChanges have taken place,
ModelThe data of the layer changes accordingly;
ModelLayer data, when data changes,
DOMElements change accordingly.
v-showWhat is the difference between instructions?
v-showWhether the corresponding value is
false, corresponding to
HtmlElements will all exist in the browser’s document; And
v-ifIf it is
falseIf so, it is not directly in the document.
How to prevent
VueDo 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 or
v-on:submit.preventBlock default events.
How do parent and child components communicate?
VueIn, 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 through
PropsData is passed to subcomponents, which pass through
EventsPass data to the parent component.
How do non-parent-child level components communicate?
- In a simple application scenario, you can use an empty
VueThe instance serves as the central event bus.
- In complex cases, you can consider using
VueThe state management mode provided by the government-
What are dynamic components? What is its function?
- By using reserved
<component>Element that is dynamically bound to its
isFeature, we allow multiple components to use the same mount point and switch dynamically.
- In addition,
VueAlso provided are
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 the
dataThe value of the property must be a function?
- Because if a component is referenced more than once, if
dataThe value of is a
ObjectIf so, then due to
ObjectIs 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.