1. Which has a higher priority, V-if or V-for? If two are present at the same time, how can we optimize for better performance?

  1. Obviously v-for is resolved before V-if
  2. If it happens at the same time, each render will execute a loop before judging the condition, so the loop is inevitable anyway, wasting performance
  3. To avoid this, nest the template in the outer layer, do a V-if judgment in this layer, and then do a V-for loop inside
  4. If conditions occur inside the loop, items that do not need to be displayed can be filtered out ahead of time by evaluating attributes

2. Why must the Vue component data be a function when the root instance of Vue is not?

There may be multiple instances of a Vue component. Defining data in object form causes them to share a single data object, and state changes affect all component instances, which is not reasonable; It is defined as a function, and will be used as a factory function to return the new data object in initData, effectively avoiding the problem of state pollution between multiple instances. This limitation does not exist in the Vue root instance creation process, also because there can only be one root instance and you do not need to worry about this situation

3. Do you know the function and working principle of key in VUE?

  1. Key is mainly used to update virtual DOM efficiently. The principle is that vUE can accurately judge whether two nodes are the same or not through key during patch, thus avoiding frequent updates of different elements, making the whole patch process more efficient, reducing DOM operations and improving performance.
  2. In addition, not setting a key can cause hidden bugs when the list is updated
  3. Vue also uses the key attribute when transitioning between elements with the same label name. The purpose is to allow VUE to distinguish between them. Otherwise, VUE will only replace its internal attributes without triggering transitions.

4. Talk about the understanding of vUE componentization?

  1. Components are independent and reusable units of code organization. Component systems are one of the core features of Vue, enabling developers to build large applications from small, independent, and often reusable components.
  2. Componentized development can greatly improve application development efficiency, testability and reusability.
  3. Components are classified into page components, business components, and general components.
  4. Components of VUE are configuration based. We usually write components that are component configurations rather than components. The framework then generates its constructors, which are based on VueComponent and extend to VUE.
  5. Common componentization technologies in VUE include: attribute Prop, custom event, slot, etc. They are mainly used for component communication and expansion.
  6. Rational division of components helps improve application performance.
  7. Components should be highly cohesive and low coupled;
  8. Follow the principle of one-way data flow.

5. What is your understanding of MVC, MVP, and MVVM?

  • 1.MVC pattern appeared earlier and was mainly applied in the back end, such as Spring MVC, ASP.NET MVC, etc. It was also applied in the early front-end field, such as backbone.js. Its advantages are clear layering, while its disadvantages are data flow chaos and maintenance problems caused by flexibility.
  • 2.MVP mode is an evolutionary form of MVC. Presenter, as the middle layer, is responsible for MV communication, which solves the coupling problem between the two.
  • 3.MVVM mode is widely used in the front-end field. It not only solves the MV coupling problem, but also solves the maintenance of a large number of complex codes and DOM operation codes, improving the development efficiency and readability while maintaining superior performance

6. How do components communicate with each other in VUE?

There are six communication modes commonly used in VUE, which are:

  1. Props ★★ (Father to son)
  2. Emit /emit/emit/ ON ★★ Event Bus (cross level communication)
  3. Vuex ★★★ (common status management) Advantages: All pages can be accessed by storing data at one time
  4. Father parent/parent/parent/children (= a program is not recommended) disadvantages: not across levels
  5. Attrs attrs/attrs/listeners If you don’t understand it is not recommended and the interviewer said this one)
  6. Provide /inject ★★★ (Advanced usage = Recommended) Advantages: Easy to use Disadvantages: Not responsive

7. Talk about the pros and cons of Vue

Advantages: 1. Data-driven view, which abstracts the real DOM from the virtual DOM (essentially a JS object), and works with diff algorithm, responsive and observer, asynchronous queue and other means to update the DOM at the lowest cost and render the page

2, componentization, component code is organized in the form of a single file, so that we can write HTML \ CSS (scoped property CSS isolation) \ JS in a file and support more powerful preprocessor functions with viee-loader

3, powerful and rich API provides a series of apis to meet the various needs of business development

4, due to the use of virtual DOM, let Vue SSR is congenital enough 5, life cycle hook function, optional code organization, written or pretty smooth, but there is still room for optimization (Vue3 composition- API)

Good ecology, active community

Disadvantages:

1. The API itself does not support IE8 and below because the underlying Object. DefineProperty implementation is reactive

2. Innate deficiency of CSR, first screen performance problem (white screen)

3, as baidu and other search engine crawlers can not climb js content, so SPA innate seo optimization heart has insufficient power (Google’s Puppeteer is quite awesome, the implementation of pre-rendering bottom layer is also used in this tool)

8. What’s the difference between Vue and React? What are the usage scenarios?

1. Vue is a complete set of officially maintained frameworks. The core libraries are mainly maintained by Yubrook Alone, while React is maintained by the undignified Book (many libraries are maintained by the community).

2. Vue is easy to get started with an advanced framework. As the vernacular says, you can learn a little, so you can use it in your project.

3, Syntactic Vue does not restrict you to es6+ completely JS page, can view and JS logic as much as possible separate, reduce many people dislike the react-JsX nasty nesting, after all, as front-end developers, or more used to CLEAN HTML.

4. Many people say React is suitable for large projects, and Vue is lightweight and suitable for small and medium-sized mobile applications. In fact, I would like to say that people have no point in mind. After all, Vue just follows the official document, and someone will help you regulate it, while React is lazy and free, so you can do whatever you want

5. Vue is more popular than React in China, largely due to its syntax including programming thinking, which is more in line with Chinese thoughts.

9. Please describe the life cycle of vUE.

The vUE life cycle, in general, is a mechanism for instance creation and destruction. It is also the interactive communication between data of vUE framework. In fact, now it seems not that difficult, but vue source code implementation of this set of mechanisms that is rare, involving complex algorithms such as the Diff algorithm

Please see below

1.vuex

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool devTools Extension (Opens New Window), providing advanced debugging functions such as zero-configuration time-travel debugging and state snapshot import and export. (from official website)