day08 interview questions

1. Do you understand Vue’s diff algorithm? Tell me

Yes, I understand Vue's Diff algorithm.

In Vue, the Diff algorithm is a process used to compare and update virtual DOM (Virtual DOM). When the data changes, Vue will build a new virtual DOM tree and compare it with the old virtual DOM tree, then find out the parts that need to be updated, and apply these changes to the real DOM to improve the page rendering efficiency.

The Diff algorithm proceeds through the following steps:

1. Comparison of old and new nodes: Vue will compare the nodes of the new and old virtual DOM trees one by one. First, the node types will be compared. If they are different, the entire node and its sub-nodes will be directly replaced. If the types are the same, the node's attributes and events will continue to be compared.

2. Update child nodes: If the node has child nodes, the child nodes will be compared and updated recursively. During this process, Vue will use some heuristic methods, such as double-ended comparison, peer comparison, etc., to minimize the number of comparisons.

3. Optimization of list rendering: In the case of list rendering (v-for), Vue will add a unique key attribute to each list item to more accurately find out the newly added, deleted and moved nodes, and reduce the time of operating the real DOM. frequency.

4. Update the real DOM: After completing the comparison and update, Vue will apply the modifications to the actual DOM elements based on the change record to update the page display.

Vue's Diff algorithm can efficiently apply changes to the page, avoid unnecessary redrawing of parts that do not need to be modified, and improve page rendering performance. However, since the Diff algorithm needs to be compared every time the data changes, you still need to pay attention to performance optimization when dealing with large lists or complex component trees.

2. Why you need Virtual Dom

Virtual DOM is a concept introduced to improve the performance and development efficiency of web applications.

In traditional front-end development, when data changes, we need to directly operate the real DOM to update the page. There are some problems with this approach:

1. Performance issues: Directly operating the real DOM will involve a large number of redrawing and reflow operations, which is very performance-consuming. Frequent DOM operations will cause page response to slow down and affect the user experience.

2. High development complexity: directly operating the real DOM requires writing a large amount of DOM operation code, including operations such as creation, update, and deletion. For complex interaction logic and UI changes, code maintenance and debugging will become difficult.

Therefore, the introduction of Virtual DOM solves these problems:

1. Improved performance: Virtual DOM exists in memory as a lightweight JavaScript object tree, which can compare and calculate differences efficiently. By comparing the differences between the old and new Virtual DOM trees, only the parts that have actually changed need to be operated, reducing frequent access and operations to the real DOM, thereby improving performance.

2. Simplify development: Using Virtual DOM can shift the developer's focus from low-level DOM operations to higher-level components and data. Developers only need to focus on data processing and status changes. Virtual DOM will be responsible for automatically calculating the parts that need to be updated based on data changes and rendering them efficiently.

3. Cross-platform capabilities: Since Virtual DOM is platform-independent, it can be used on different rendering engines. This allows developers to use Vue, React and other frameworks for web, mobile and desktop application development to achieve code reuse and cross-platform capabilities.

In short, by introducing Virtual DOM, we can process and update pages in a more efficient and concise way, improving the performance and development efficiency of web applications.

3.What are the design goals of Vue3.0? What optimizations have been done?

The design goals of Vue 3.0 include:

1. Better performance: Vue 3.0 has made a number of optimizations in terms of performance, including using Proxy instead of Object.defineProperty to provide a more efficient responsive system; it has optimized the rendering of virtual DOM, reducing unnecessary operations and redundancy. painted.

2. Smaller size: Vue 3.0 has undergone a modular reconstruction and provides many functions as optional independent packages, allowing developers to freely select the required functions according to their needs, thus reducing the size of the library.

3. Better TypeScript support: Vue 3.0 is rewritten in TypeScript and provides a complete type definition file. This makes it easier to spot potential errors during development and provides better intelligence and compile-time checks.

4. Better development experience: Vue 3.0 introduces some new features and syntactic sugar, such as Composition API and some new instructions, to help developers better organize and reuse logic code, improving development efficiency and Code maintainability.

5. Better scalability: Vue 3.0 borrows an idea from React and introduces the concept of Fragments, allowing components to return multiple root nodes, improving the flexibility and reusability of components.

6. Better build toolchain support: Vue 3.0 is better integrated with modern front-end build tools and ecosystems, while supporting Vue CLI for project building, development, and packaging.

These optimizations and improvements have significantly improved Vue 3.0 in terms of performance, volume, development experience and scalability, providing developers with a better use and development experience.

4. What is the difference between the Composition Api used by Vue3.0 and the Options Api used by Vue2.x?

Vue 3's Composition API and Vue 2's Options API are two different component design methods. They have some differences in code organization and logic reuse.

1. How to organize code: Options API organizes code based on options objects, placing the properties, life cycle hooks and methods in components into a large options object. The Composition API organizes code through functions and encapsulates relevant logic code in a single function, making the logic clearer and reusable.

2. Logic reuse method: Options API uses mixins to achieve code reuse, but this will lead to naming conflicts and difficulty in tracking. The Composition API uses the hooks function to more flexibly combine and reuse logic, improving the readability and maintainability of the code.

3. Reactive system: In the Options API, reactive data needs to be declared in the data option and accessed using the this keyword. In the Composition API, you can use the reactive function to create responsive data and access it directly inside the function, avoiding the problem of this pointing.

4. Lifecycle hooks: Specific lifecycle hook functions are used in the Options API to handle component lifecycle events. In the Composition API, you can use the onXXX function to listen for specific life cycle events.

In general, the Composition API is more flexible and composable, allowing component logic to be better separated and reused. It can help developers organize code more clearly and improve the readability and maintainability of code. The Options API is the API mainly used in the Vue 2.x version. It is still an effective and feasible choice for small projects or developers who are familiar with the Options API.

5. Let’s talk about the principle of Vue data responsiveness

The reactive principle of Vue is realized through data hijacking and observer mode in Vue. Specifically, it includes the following key steps:

1. Object.definePropertyData hijacking: Vue hijacks data objects by using methods to add getters and setters for each property. When a property is accessed, a getter is triggered for dependency collection; when a property is modified, a setter is triggered for notifying dependencies to update.

2. Dependency collection: When the component encounters responsive data during rendering, a dependency relationship will be established and the observer (Watcher) object will be added to the dependency list. Dependencies can be collected in the getter and stored in the corresponding observer object.

3. Dependency update: When the responsive data changes, the setter will be triggered, and all dependent observer objects will be notified to update. Updates can cause re-rendering or perform other related operations.

4. Observer pattern: Vue uses the observer pattern to implement dependency collection and dependency update. The main roles are Dep (dependency) and Watcher (observer). Dep is used to manage dependencies. Multiple observers can depend on the same Dep, and one observer can depend on multiple Dep. Watcher is a specific dependency that receives notifications when data changes and performs corresponding update operations.

Through the above steps, Vue implements responsive data binding. When the data changes, the related views are automatically updated, achieving synchronization of data and views. This allows developers to write code in a declarative manner without having to manually update the DOM, improving development efficiency and code maintainability.

6. Tell me about your understanding of React? What are the features?

React is a JavaScript library for building user interfaces. It focuses on building reusable and efficient UI components and provides a declarative programming model.

The following are the main features of React:

1. Componentization: React encourages splitting the UI into independent, reusable components. This component-based development approach makes the code easier to understand, test, and maintain. Components can be nested and combined into each other to form complex interfaces.

2. Declarative programming model: React uses a declarative approach to describe the user interface. Developers only need to define the desired UI state and do not need to focus on how to operate the DOM for updates. React will automatically update the corresponding view according to changes in state, simplifying DOM operations and manual state management.

3. Virtual DOM: React uses virtual DOM for efficient UI updates. It abstracts the entire UI structure into a virtual DOM tree in memory. When data changes, it determines the parts that need to be updated by comparing the old and new virtual DOM trees, and then performs DOM operations in batches, reducing the number of direct operations on the actual DOM and improving performance.

4. One-way data flow: React implements one-way data flow (One-Way Data Binding). The parent component can pass data to the child component through props. The child component cannot directly modify the data of the parent component. Instead, it notifies the parent component to update its status by calling a callback function. This data flow design makes the flow of data between components more controllable and predictable.

5. Lifecycle methods: React components have a series of lifecycle methods that can perform specific operations at different stages of the component. Developers can use these methods to manage the state of components, perform asynchronous operations, optimize performance, etc.

6. JSX syntax: React uses JSX (JavaScript XML) as the template language for components. JSX allows developers to write HTML-like code directly in JavaScript to describe the structure of the UI and the relationship between components. JSX is converted into pure JavaScript code through compilation tools, achieving a highly flexible and extensible interface construction method.

The above is my understanding of React and a brief introduction to its main features. As a popular and popular front-end framework, React has a strong ecosystem and a wide range of application scenarios, and plays an important role in building modern web applications.