This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Several common problems with Vue are summarized:

What are the communication methods of VUe2.0 components?

  • Parent-child component communication: props and Event, V-model,.sync, ref, $parent, and $children

  • Non-parent-child component communication: $attr and $Listeners, provide and inject, eventBus, access via root instance $root, vuex, Dispatch, and Brodcast

How does v-Model implement bidirectional binding?

  • V-model 2.0 is used to create bi-directional bindings on form controls or components. It is essentially the syntagmatic equivalent of V-bind and V-ON. Using v-Model on a component will default to a component binding namevalueProp and namedinputIn the event.

What is the order in which Vue’s parent and child lifecycle hooks are executed?

  • Mouted is mounted after the parent component. Mouted is mounted after the child components. Mouted is mounted after the parent component

    Parent beforeCreate -> Parent created -> parent beforeMount-> child beforeCreate -> child created -> child beforeMount-> Child Mounted -> parent Mounted

What are the differences between V-show and V-IF?

  • V-if destroys and rebuilds the conditional block’s event listeners and subcomponents during the switch, does nothing if the initial condition is false, and does not begin rendering the module until the condition is true for the first time.

  • V-show just switches based on CSS and renders regardless of the initial conditions.

  • Therefore, v-if switching is more expensive, whereas V-show initial rendering is more expensive, and v-show is more appropriate when switching is required frequently, or when part of the DOM to switch is complex. V-if is more appropriate for rendering that rarely switches.

What is the difference between computed and Watch?

  • Computed attributes, which depend on computed values of other attributes, are cached and updated only when the dependent values change.
  • Watch performs some logic in the callback when the listening properties change.
  • Therefore, computed is suitable for template rendering, where a value depends on other responsive objects or even computed attributes, while Watch is suitable for monitoring the change of a value to complete a complex business logic.

What are the disadvantages of Object.defineProperty?

  • Object.defineproperty can only hijack attributes of an Object, while Proxy can directly Proxy objects. Because Object.defineProperty can only hijack attributes, each attribute of the Object needs to be traversed. Proxy can directly Proxy objects.

  • Object.defineproperty manually Observe the new attribute. Because object.defineProperty hijacks the attribute of the Object, you need to traverse the Object again when adding the attribute. Its newly added property is hijacked using Object.defineProperty. For this reason, when using Vue to add new attributes to arrays or objects in Data, you need to use vm.$set to ensure that the new attributes are also responsive.

  • Proxy supports 13 interception operations, which defineProperty does not.

  • New standard performance bonus,Proxy as a new standard, in the long run, JS engine will continue to optimize Proxy, but getters and setters will basically no longer be targeted optimization.

  • Poor Proxy compatibility Currently there is no complete Polyfill scheme that supports all interception methods of Proxy

What is the role of key in V-for?

  • Key is the unique ID assigned to each Vnode. In the process of vnode diff at the same level, you can quickly compare keys to determine whether they are the same node, and use the uniqueness of keys to generate a map to obtain corresponding nodes more quickly. In addition, when the key is specified, the “reuse in place” strategy is no longer used to ensure the accuracy of rendering.

Why are v-for and V-if not recommended together

  • When v-for and V-IF are on the same node, V-for has a higher priority than V-if, which means that V-IF will run separately in each V-for loop. This can be a significant performance waste if the array to be traversed is large and the actual data to be displayed is small. In this scenario, it is recommended to use computed data filtering first.

Performance optimization aspects of Vue

  • The coding phase minimizes data in data, adding getters and setters to data, Watcher v-if and V-for can’t be used together. If you need to use V-for to bind events to each element, use the event broker. SPA page uses keep-alive cache components. Use V-if instead of V-show key to ensure unique use of route lazy loading, asynchronous component anti-shake, throttling third-party modules on demand import long list scrolling to visual area dynamic load picture lazy loading

  • SEO optimized pre-render server rendering SSR

  • Multithreaded packet happypack splitChunks chunks away from common files sourceMap optimization

  • User experience Skeleton screen PWA

  • You can also use caching (client-side caching, server-side caching) optimization, server-side gZIP compression, and so on.