The Computed watch and method

The answer:

Computed: By default computed is also a Watcher with a cache that computs only when the dependent data changes, and when the data does not change, it reads the cache data. If one data depends on other data, use computed

Watch: The function needs to be executed every time. Watch is better suited for asynchronous operations when data changes. If you need to do something when some data changes, use Watch.

Method: Once a method is applied to a template, the view will be re-rendered every time it changes, which is a high performance overhead

V-if is different from V-show

The answer:

  • V-if does not render the DOM element of the node where the current instruction resides if the condition is not true

  • V-show simply toggles the current DOM show and hide

Why can’t v-for and V-if be used together

The answer

V-for has a higher priority than V-if, and every element of v-if is added, causing performance problems.

What problems v-HTML causes (Easy)

The answer

  • XSS attacks

  • V-html replaces the elements inside the tag

Describes the component rendering and update process

The answer

When a component is rendered, the child component’s constructor is built and instantiated using the vue.extend() method. Finally, the mount is manually called $mount(). When updating components, the patchVnode process will be carried out, and the core is the DIFF algorithm.

Why is data in a component a function

The answer

Avoid data interaction between components. When the same component is reused multiple times, multiple instances are created that use the same constructor if data is an object. To ensure data independence for components, each component must return an object as the state of the component through the data function.

Why use asynchronous components?

The answer

  1. Asynchronous components are packed separately and loaded in JSONP mode, which effectively solves the problem of large files.
  2. The core is that the package component definition becomes a function, a dependencyImport ()Syntax, can achieve file segmentation loading.

See the official documentation for details: cn.vuejs.org/v2/guide/co…

Difference between Action and mutation

The answer

  • mutationIs synchronous update,$watchErrors are reported in strict mode
  • actionIs a synchronous operation that can be invoked after obtaining datamutationSubmit final data

The difference between slots and scoped slots

slot

The answer

  • When a component virtual node is created, the virtual node of the component’s son is saved. When the component is initialized, the sons are classified by slot attributes {a:[vNode],b[vnode]}

  • Components are rendered with nodes of the corresponding slot properties. (The slot’s scope is the parent component)

Scope slot

The answer

  • Scope slots are not parsed as child nodes of components. Is parsed into a function that is called to render when the child component renders.

  • Normal slots render scoped to the parent component, and scoped slots render scoped to the current child component.

How to separate the same logic in VUE

The answer

It’s a matter of examining the use of vue.mixin, mixing some common logic into functions for each component lifecycle.

Talk about what you know about Keep-Alive

The answer

Keep-alive can cache components so that the current component will not be uninstalled when the component is switched. Include /exclude, activated, and deactivated are two common attributes

Vue performance optimization

The answer

Coding optimization:

  • The event agent
  • keep-alive
  • Break up the component
  • keyGuaranteed uniqueness
  • Route lazy, asynchronous components
  • If the throttle

Vue load performance optimization

  • Import third-party modules on demand (babel-plugin-component ）
  • Lazy loading of images

The user experience

  • app-skeletonSkeleton screen
  • shellapP shell
  • pwa

SEO optimization

  • pre-rendered

The last word

🚀🚀 feel good friends can ⭐️ follow me, the follow-up will continue to update ~

If you want to get the complete layout of the book, you can join the exchange skirt, front: 1048, middle: 337, last: 049, skirt from the students to the big man, free to share resources, be there or be square!

⭐️⭐️ Finally, I wish you are preparing for the autumn recruitment make-up recruitment and spring recruitment of small partners interview smoothly ~, reap the offer, let’s work hard together. And happy New Year ❤️ ❤️ ~