Recite 5 every day, be sure to memorize, I hope to find a little help for the small front end of the job

After the wonderful weekend, the daily 5 questions series has been updated again ~

1. Communication between components (parent component, sibling component, cross-level component)

【 Almost all questions 】

Here’s a look at each:

(1)props / $emitApplicable to parent-child component communication

Parent props, parent $on, $emit.

(2)ref 与 $parent / $childrenApplicable to parent-child component communication

  • refIf used on a normal DOM element, the reference refers to the DOM element. If used on a child component, the reference refers to the component instance
  • $parent / $children: Accesses the parent/child instance

(3)EventBus ($emit / $ON)It is suitable for communication between father-child, intergenerational, and sibling components

This approach uses an empty Vue instance as the central event bus (event hub), which triggers events and listens for events to communicate between any component, including parent, generational, and sibling components.

(4)$attrs/$listenersIt is suitable for intergenerational component communication

  • $attrs: contains property bindings (except class and style) in the parent scope that are not recognized (and retrieved) by prop. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included and can passv-bind="$attrs"Pass in internal components. Often used in conjunction with the inheritAttrs option.
  • $listeners: contains a V-ON event listener in the parent scope (without the.native modifier). It can go throughv-on="$listeners"Passing in internal components

(5)provide / injectIt is suitable for intergenerational component communication

The ancestor component provides variables through provider, and the descendant component injects variables through Inject. Provide/Inject API mainly solves the communication problem between cross-level components, but its usage scenario is mainly that sub-components obtain the state of the upper level components, and a relationship between active provision and dependency injection is established between cross-level components.

(6) VUEX: The ultimate solution for father-child, intergenerational and sibling component communication

2. Tell me about Vuex

Vuex is a state management mode developed specifically for vue.js applications. At the heart of every Vuex application is the Store. A Store is basically a container that contains most of the states in your app.

(1) The state storage of Vuex is responsive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.

(2) The only way to change the state in a store is to explicitly commit mutation. This allows us to easily track each state change.

It mainly includes the following modules:

  • State: Data structure that defines the State of the application, where the default initial State can be set.
  • Getter: Allows the component to get data from the Store. The mapGetters helper function simply maps the getters in the Store to local computed properties.
  • Mutation: is the only method that changes the state in the store, and must be a synchronization function.
  • Action: Used to commit mutation rather than directly change the state, and can include any asynchronous operation.
  • Module: Allows you to split a single Store into multiple stores and Store them simultaneously in a single state tree.

What is $nextTick?

Vue implements responsiveness rather than immediately changing the DOM after data changes, but updating the DOM according to a certain strategy.

NextTick executes a deferred callback after the next DOM update cycle, and when you use nextTick after modifying the data, you can retrieve the updated DOM during the callback

4. What is SSR?

SSR is server side rendering, which means Vue renders the tags into HTML on the server side, and then returns the HTML directly to the client side.

SSR has the advantages of better SEO and faster first screen loading. However, it also has some disadvantages, such as limited development conditions, server-side rendering only supports beforeCreate and Created two hooks, when we need some external extension libraries need special processing, server-side rendering applications also need to run in node.js environment. There is also a greater load demand on the server.

5. What Vue performance optimization did

Optimization is a big topic and involves many aspects:

Coding phase

  • Minimize the amount of data in data. Getter and setter are added to all data in data, and the corresponding Watcher is collected
  • V-if and V-for cannot be used together
  • Use the event broker if you need to use V-for to bind events to each element
  • The SPA page uses the keep-alive cache component
  • In more cases, use v-if instead of V-show
  • Key guarantees uniqueness
  • Use routing lazy load, asynchronous components
  • Anti-shake and throttling
  • Import third-party modules as required
  • Long lists scroll to visual area for dynamic loading
  • Lazy loading of images

SEO optimization

  • pre-rendered
  • Server rendering SSR

Packaging optimization

  • The compression code
  • Tree Shaking/Scope Hoisting
  • Load third-party modules using CDN
  • Multithreaded package Happypack
  • SplitChunks removes public files
  • SourceMap optimization

The user experience

  • Skeleton screen

  • PWA

In line with the front end of the job for a little help in the original intention, learn from the nuggets inside a lot of big man’s article, if there is infringement please inform