Summary of Vue interview questions (1)

As the most popular front-end framework, Vue has become the preferred technology of many companies and programmers. I may also be preparing for an interview recently, so I found some information to integrate it

Talk about your understanding of MVVM principles

• M-Model, Model represents the data model, and the business logic for data modification and operation can also be defined in the Model
• V-View, View represents the UI component, which is responsible for transforming the data model into UI for display
• VM-ViewModel, ViewModel monitors model data changes, controls view behavior, and handles user interaction. A simple understanding is an
  object that synchronizes View and Model, connecting Model and View,

[Key point]: You must understand Vue's MVVM principle, and you must ask in the interview!

Please talk about the principle of responsive data

Using data hijacking combined with the publisher-subscriber model, use Object.defineProperty() to hijack the setter and getter of each property

By default, Vue will use Object.defineProperty to redefine all properties for the properties in the data when initializing the data. When the page reaches the corresponding properties, it will perform dependency collection (collect the watcher in the current component). If the properties change, it will notify the related dependencies. Update operation

Why Vue uses asynchronous rendering

Because if asynchronous update is not used, then the current rent button will be re-rendered every time the data is updated, so for performance considerations, Vue will update the data asynchronously after the current round of data update

Advantages of Vue

• The lightweight framework only focuses on the view layer. It is a collection of views for building data, with a size of only tens of kb. Vue.js provides efficient data binding and a flexible component system through a concise API.
• Simple and easy to learn Chinese development, Chinese documents, no language barriers, easy to understand and learn
• Two-way data binding realizes two-way data binding through the idea of ​​MVVM, so that developers no longer need to manipulate dom objects and have more time to think about business logic
• Componentized
  Vue.js uses components to split various modules in a single-page application into a single component (component). We only need to write various component tags (occupying holes) in the parent application first. And write the parameters to be passed into the component in the component label (just like passing a parameter to a function, this parameter is called the attribute of the component), and then write the implementation of various components (fill in the hole), and then the entire application finished
• The virtual DOM
  calculates and optimizes the final DOM operation. Since this DOM operation is a preprocessing operation and does not actually operate the DOM, it is called virtual DOM. Finally, the DOM operation is submitted after the calculation is completed, and the DOM operation change is reflected on the DOM tree
• The separation of view, data, and structure makes data changes easier, no logic code modification is required, and related operations can be completed only by operating data
• Running faster, like comparing and reacting, it is also operating virtual dom. In terms of performance, vue has great advantages

Comparison of Proxy and Object.defineProperty()

Advantages of Proxy:

• You can directly monitor the object instead of the attribute and return a new object
• You can directly monitor changes in values
• Can hijack the entire object and return a new object

Disadvantages of Proxy:

• Proxy is a new feature provided by es6, and compatibility is not good, so Vue3 is not officially released for developers to use

Advantages of Object.defineProperty:

• Good compatibility, support IE9
• Versions below IE9 are not compatible

Disadvantages of Object.defineProperty:

• Unable to monitor the change of the array subscript, which leads to the direct response to the array setting value through the array subscript.
• We can only hijack the attributes of the object, we need to traverse each attribute of each object

How to compare React and Vue

Different implementation principles of monitoring data changes

• Vue can accurately know data changes through getter/setter and some functions
• By default, React is done by comparing references (diff). React does not accurately monitor data changes.

The data flow is different:

• Vue2.0 can realize two-way binding through props, and use the state management framework of vuex one-way data flow
• React does not support two-way binding, and advocates single data flow, Redux one-way data flow state management framework

The difference between component communication:

• Vue has three component communication methods: The parent component passes data to the child component through props or calls back. The child component sends data or callbacks to the parent component through the event event. The parent component
  can pass data to the child component through provide/inject, which can be cross-level
• React has three component communication methods: The parent component passes data to the child component through props. React does not support the child component to send data like the parent component. Instead, it uses the callback function to
  implement the parent component to pass data to the child component through the context, which can be cross-level

The template rendering method is different:

• On the surface: React renders templates through JSX, Vue renders through HTML
• From a deeper perspective: React implements common syntax in templates through native JS, such as plug-ins, conditions, and loops.
  Vue is a separate template separated from component JS, implemented through instructions, such as: v-if

Data used in the template:

• The data used in the template in React can be directly imported and called in render
• The data used in the template in Vue must be transferred on this, and a component must be imported and declared in components

The rendering process is different:

• Vue does not need to render the entire component tree
• When React state changes, all child components are re-rendered

The framework is essentially different:

• Vue is essentially the MVVM framework, developed from MVC
• React is a front-end componentized framework, developed from back-end componentization

The difference between Vuex and Redux:

• Vuex can use dispatch and commit to submit updates
• Redux can only use dispatch to submit updates

Different ways of combining different functions:

• The way Vue combines different functions is through mixin, which can help me to compile the template defined and the declared props to receive data....
• React combines different functions through HoC (high-order components), which is essentially a high-order function

How to extract the same logic in Vue

Vue.mixin usage mixes some common logic into every life cycle, function, etc. of the component

NextTick implementation principle

The nextTick method mainly uses macro tasks and micro tasks to define an asynchronous method. Multiple calls to nextTick will store the method in the queue, and the current queue is cleared through this asynchronous method. So this nextTick method is an asynchronous method

The time complexity of the diff algorithm

The complete diff algorithm of two numbers is a time complexity of o(n3). Vue optimizes the problem of O(n3) complexity and converts it into a problem of O(n) complexity (only compare the same level without considering cross-level Problem) In the front end, you rarely move Dom elements across levels, so Virtual Dom only compares elements at the same level

Briefly describe the principle of the diff algorithm in Vue

• Compare at the same level first, compare child nodes
• First judge whether one party has a son and the other has no son
• I have a son
• Recursively compare child nodes

The difference between v-if and v-show in Vue

• v-show is css switch, v-if is complete destruction and re-creation
• Use v-show for frequent switching and v-if for less changes during runtime
• v-if='false' v-if is conditional rendering, it will not be rendered when false

When is Vue called in each life cycle

• beforeCreate is called after the instance is initialized and before the data observer
• The created instance is called after it has been created. In this step, the following configuration has been completed: data
  observer, calculation of attributes and methods, watch/event event callback, there is no $el
• beforeMount is called before the start of the mount: the related render function is called for the first time
• mounted el is replaced by the created vm.$el, and the hook is called after mounting it on the instance
• beforeUpdate is called when the data is updated, before the virtual DOM is re-rendered and patched
• updated the virtual DOM re-rendering and patching due to data changes, after which the hook is called
• beforeDestory is called before the instance is destroyed, at this step, the instance is still fully usable
• Called after the destroyedVue instance is destroyed. After the call, everything indicated by the Vu instance will be unbound, all event listeners will be removed, and all sub-instances will also be destroyed. This hook will not be called during server-side rendering

Because of the limited space of the article, scan the QR code below for more follow-up content, follow the WeChat official account, and update it as soon as possible!