Well, this is the interview question! As we all know, gold nine silver ten, is a good season for job-hopping interview, the following brings you 21 interview questions, the answer is only for reference, the topic should think more about themselves.

1. Function anti-shake and throttling

When frequent user operations lead to multiple interface data requests, resulting in loss of page performance and pressure on the server, we can reduce or even avoid the impact of this situation by using the method of anti-shake throttling.

So let’s talk briefly about what is anti-shake throttling.

Image stabilization

If no event is raised, the event function will execute only once within a certain period of time, and if it does, it will restart the timer. For example, if the user pulls the scrollbar once and does not move the scrollbar again within the specified time of one second, the function will be executed only once and a drop-down refresh occurs. But if the user pulls down the scrollbar multiple times in a second, the timer will be cleared and recalculated, meaning that it will wait another second. Of course, in real development this time might be hundreds of milliseconds rather than one second. Specific code to find their own, the interview will not be lazy.

The throttle

Throttling analogy is relatively simple, when continuously triggering events, set a certain period of time can only use a processing function, just like a faucet, once opened, but you slightly tighten, there will be a regular drip drip in a certain period of time, this is throttling. Or put it this way, some people will spend all kinds of money to satisfy their pent-up consumption desire once their salary comes down. This is the Moonlight clan, which is a frequent trigger event. But some people only spend 2000 yuan every month and save the rest. This is to economize and save money. In this case, at a certain time per month, an event function is $2,000.

A little detail

The timer needs to be cleared before the event is called for anti-shake, and the throttling needs to check whether the timer is empty, and then continue the execution. (These are the details)

2. Why is data in Vue a function

Why is that? Because if data is an object, when the median value of data is used on the page, if the value is changed, then all the places involving the value will be changed, which can also be understood as variable pollution, which is a shallow copy. When data is a function, due to the scope of the function, the values out of each call are not affected by each other, which can be understood as deep copy. Check out the official documentation here

3. Array deduplication

  1. Set method to remove the weight
  2. The two-level for loop is de-duplicated by splice
  3. IndexOf method for de-weighting
  4. Sort method to remove weights
  5. Includes method
  6. The filter to heavy
  7. Give home heavy

Check out this article: Array de-duplication

4. Say Promise and asycnc await

Promise was an asynchronous programming idea designed to solve callback hell, making it more intuitive and easier to maintain than callback hell. Async await is syntax-candy based on Promise and Generator, just to make writing code smoother and more like synchronous code, increasing readability. Await must appear inside async functions and cannot be used alone. Await can be followed by any JS expression.

5. How does VUE achieve communication between components

Provide /inject component communication, EventBus communication, ref ().http: / / props/parent / $emit/parent/vuex See this article for more communication methods: Component communication

6. It is said that VUE is an incremental framework, how to understand the incremental framework

Just like vUE advocates lazy loading, on-demand import and compontized development in many places, Water brother thinks that this is a kind of idea of eating and drinking, hungry to eat, thirsty to drink, and then use when used, step by step, step by step to develop. This is a personal understanding, and you can have your own ideas.

7. Advantages and disadvantages of single-page apps

advantages

  1. User experience is good, fast, content changes do not need to reload the entire page, avoiding unnecessary jumps and repeated rendering.
  2. The responsibilities of the front and back end are separated (the front end is responsible for view, the back end is responsible for Model), with a clear architecture
  3. Reduce the strain on the server

disadvantages

  1. SEO(search engine optimization) is difficult
  2. The first time to load a page is more time-consuming
  3. Forward, backward, address bar, etc., need to program management, so it will greatly increase the complexity of the page and the difficulty of logic

8. Vue lifecycle and respective roles

  1. Created, beforeMount, Mounted, beforeUpdate, updated, beforeDestroyed, and destroyed.

  2. BeforeCreate: called after the instance is initialized and before the Data Observer and event/ Watcher events are configured.

  3. Created: called immediately after an instance is created. At this step, the instance is configured with data observer, property and method operations, and Watch/Event event callbacks. However, the mount phase has not yet started and the $EL attribute is not currently visible.

  4. BeforeMount: Called before the mount begins, the associated render function is called for the first time.

  5. / / mounted: the el is replaced by the newly created vm.$el, and is called after the root instance mounts an element in the document.

  6. BeforeUpdate: Called when data is updated and occurs before the virtual DOM is re-rendered and patched.

  7. Updated: This hook is called after the virtual DOM is re-rendered and patched due to data changes.

  8. BeforeDestroy: Called before instance destruction. At this step, the instance is still fully available.

  9. Destroyed: Called after the vue.js instance is destroyed. When called, everything indicated by the vue.js instance is unbound, all event listeners are removed, and all subinstances are destroyed.

  10. The following two cycles are added when using the component’s KEP-alive function.

  11. Activated is called when the keep-alive component is activated.

  12. Deactivated is called when the keep-live component is disabled.

  13. Vue2.5.0 has a new periodic hook: ErrorCaptured, called when an error from a descendant component is caught.

9. Design mode of VUEX

The singleton pattern

10. Difference between GET and POST

Get is used to obtain data, and POST is used to upload data to the server. Post is secure and has parameters. Get can be taken with or without.

11. How to use native JS to achieve qq screenshot and edit text effect

Here is an idea, to use some js drag and coordinate methods, to obtain text can use clipboard plug-in, it is generally used to do click copy text operation. Don’t say details, think more yourself.

12. The difference between ajax and AxiOS in jquery

The difference between

Axios encapsulates Ajax technology through Promise, just like jquery encapsulates Ajax. In short, Ajax technology implements partial data refresh, and AXIos encapsulates Ajax. Axios has Ajax, but axiOS does not necessarily have Ajax. The bottom line is that Axios is Ajax, and Ajax is more than Axios

The advantages and disadvantages

ajax

  1. Itself is targeted at MVC programming, not in line with the tide of front-end MVVM
  2. The original XHR development, XHR itself architecture is not clear, there is an alternative plan of FETCH, the whole jquery project is too large, it is very unreasonable to use Ajax only to introduce the whole jquery (personalized packaging plan can not enjoy CDN service)
  3. Ajax does not support the browser’s back button
  4. Security issues Ajax exposes the details of the server interaction
  5. Search engine support is weak
  6. Break the exception mechanism of the program
  7. Not easy to debug

axios

  1. Create HTTP requests from Node.js
  2. Supporting Promise API
  3. Client-side Prevention of CSRF (Malicious Use of websites)
  4. Provides some interfaces for concurrent requests

13. Your understanding of JS synchronous and asynchronous

Synchronous means eating before going to school, asynchronous means eating while going to school.

14. Differences between VUe2 and VUe3

  1. Refactoring the reactive system, replacing Object defineProperty with Proxy, using Proxy advantages:
  2. You can listen directly for changes in array type data
  3. The target of listening is the Object itself, and there is no need to iterate over every attribute like Object defineProperty-, which provides some performance improvement
  4. 13 methods such as Apply, ownKeys, and HAS can be intercepted, but Object.defineProperty cannot
  5. Add/delete object attributes directly
  6. New Composition API for better logic reuse and code organization
  7. Refactoring Virtual DOM
  8. Template compile-time optimization to compile some static nodes into constants
  9. Slot optimization, which compiles a slot to a lazy function and gives the decision to render a slot to a child component
  10. Extracting and reusing inline events in templates (originally regenerating inline functions for each rendering)
  11. Code structure tweaked to make Tree shaking easier and smaller
  12. Use Typescript to transform flows

15. Bidirectional data binding principle of Vue

One-sentence version

This is implemented by the get and set methods in Object.defineProperty (). When a data change is hijacked by the set method, a data update is triggered. Vue3.0 replaces Object.defineProperty with a native Proxy.

Other versions

Other versions of a lot of words, and around the unclear, so skip.

16. Know which front-end performance optimizations

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-I 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
  • You can also use caching (client side caching, server side caching) optimization, server side
  • Enable gzip compression.

17. Talk about MVVM

MVVM stands for model-view-ViewModel. MVVM is a design idea. The Model layer represents the data Model, where you can also define the business logic for data modification and manipulation; A View represents the UI component that transforms the data Model into a UI presentation, and a ViewModel is an object (bridge) that synchronizes the View and Model. In MVVM architecture, there is no direct connection between View and Model, but interaction through ViewModel. The interaction between Model and ViewModel is bidirectional, so the change of View data will be synchronized to Model, and the change of Model data will be immediately reflected to View. On. The ViewModel connects the View layer with the Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention, so developers only need to focus on business logic, do not need to manually manipulate DOM, do not need to pay attention to the synchronization of data state. Complex data state maintenance is managed entirely by MVVM.

The role of 18 $nextTick

Using the $nextTick method allows you to update your view as soon as your data changes and the page doesn’t change in time. NextTick’s callback is a deferred callback that is executed after the next DOM update cycle ends. Using this method immediately after modifying the data allows you to retrieve the updated DOM.

19. How to implement proxy

Webpack comes with http-proxy-Middleware integrated into devServer. Configure the Proxy option for devServer

20. Difference between V-if and V-show

In common

Both V-if and V-show can show and hide elements

The difference between

  1. V-show simply controls the display attribute of an element, whereas V-if is conditional rendering (if true, the element will be rendered, if false, the element will be destroyed).
  2. V-show has a higher first render overhead, whereas V-if has a much lower first render overhead;
  3. V-if has a higher switching cost, whereas v-show has a lower switching cost.
  4. V-if has matching V-else -if and V-else, whereas V-show does not
  5. V-if can be used with template, v-show can’t

21. SessionStorage and localStorage

  1. SessionStorage is used to store data in a session locally. The data can only be accessed by pages in the same session. When the session ends, the data is destroyed. Therefore, sessionStorage is not a persistent local storage, only session level storage
  2. While localstorage is used for persistent localstorage, data will never expire unless it is actively deleted.

Tired oh, finally finishing, the actual topic is more, but pick some often asked, the key, and then write rough, or take some time, now is September 11 23:50, I hope this article is useful to you.