Is being continuously updated... , passing friends, you can click a like, pay attention to ~~~

01, The Promise principle?

Promise is a solution to asynchronous programming that makes more sense and is more powerful than traditional solutions — callback functions and events.

Promise has three states: wait state, success state and failure state. When new a Promise instance object, pass two corresponding methods, ondepressing and onRejected, and initialize the current state. When the state changes, the corresponding method will be triggered. This is a big pity, which is fulfilled successful-onfulfilled, failure-onfulfilled. If the state has not changed, it will be in the waiting state, that is, when the asynchronous program is finished processing, the asynchronous task will be completed.

Along the way, there are chain calls involving promises, as well as asynchronous staging (waiting states are stored first) and invocation (calls when states change)

Reference Documents:

  • Promise to resolve asynchrony

  • Javascript asynchronous solution

02, then can be called chain, multiple THEN, if go to the next THEN failure callback?

Answer: 1, return a failed promse 2 and throw an error

03. “THEN” can be called in chain form. How to terminate the next “THEN” when there are multiple “THEN”?

Answer: Return a Promise that is in a pending state

04, What are the asynchronous solutions of JS ()?

  1. Callback functions (node, nesting, err).
  2. Promise.
  3. The Generator + co. Co can solve the promise nesting problem.
  4. Generator + Promise (Promise nested problem)
  5. Async +await is the syntactic sugar of Generator

Turn a pseudo-array into a real array?

  • Use extension operators.Eg. […obj] (make sure obj is iterable)
  • Method on an arrayfrom, eg. Array.from()
  • An array ofsliceMethod, eg. [].slice. Call (obj)

Extension operators: we need to ensure that obj is iterable array. from does not need to ensure that OBj is iterable, internally we will make it iterable

06. What new ES6 syntax have you used (** familiar with ES syntax)?

WeakMap Set ES6 modularize arrow function decorator template string array in a stack of methods reduce Map filter some every…… WeakMap Set ES6 modularize arrow function decorator template string array in a stack of methods reduce Map filter some every….. Object.key() object.defindProty objct.value Objct.xxxx class, inherits constructor prototype chain Proxy —- defindPrototy Symbol…

30. What is the essence of the V-Model?

V-model: is a syntax sugar, essentially :value and @input

<Son2 :value="counter" @input="newValue=>counter = newValue"></Son2>

<Son2 v-model="counter"></Son2>
Copy the code

31. What about the life cycle in VUE?

beforeCeateThe first hook to go after vue is instantiated, without data hijackingcreatedVue instance has been created, data detection is OK, methods and computed are OK,el OK

beforeUpdateData changed the ready render view domdiffupdatedDon’t modify the data after rendering the view, it may loop foreverbeforeDestroyCalled before vm destructiondestroyedCall after destruction

32. What do hooks usually do in vue?

  • createdThe VM has been created to initiate ajax requests
  • mountedThe VM has been mounted to complete the DOM for initiating Ajax requests
  • beforeUpdateFurther changes to the state will not be re-rendered
  • updatedData cannot be modified
  • beforeDestroyOptimize operation, empty timer, unbind event

33. What scenarios does the vUE lifecycle fit into? Draw the life cycle of vUE?

Vue life cycle service applications in real scenarios

  • Created: Performs ajax requests to get asynchronous data and initializes data

  • Mounted: Obtains the DOM node of the mounted element

  • NextTick: Dom manipulation immediately after data is updated for a single event

  • Updated: Any data updates if unified business logic processing is to be done

  • Watch: Monitor data changes and process accordingly

Vue life cycle

34. Properties on vue instances?

Vm.$data: data object observed by the Vue instance VM.$options: initialization options used by the current Vue instance. Vm.$nextTick: vm.$el: get the updated DOM element from the event loop vm.$watch: monitor the data vm.$set: set the data to a responsive vm. Deletes an attribute of an object.

35. Why is index not usually used as the key?

The key role

Function: Effectively update the virtual DOM, key is to add a unique identity to the DOM, when the element changes, through the Domdiff algorithm, to achieve smaller updates, improve performance. In summary: elements that change are updated, and those that do not change are not updated

why

When index is used as the key, there may be some DOM elements that are not changed, but only the order is changed, but the key value is changed. According to the Domdiff algorithm, all DOM elements with key changes will be updated

For example, render an array and bind index as a unique identifier. When the data is sorted in reverse order, the DOM elements remain the same and the order is changed, but the key on the DOM is changed at this time, so rendering will be repeated, wasting performance.

36. What is the difference between computed, Watch and methods?

  • computed: A calculated property is cached. If the data on which the calculated property depends is not necessarily changed, it is fetched from the cache
  • methodsThis method is called every time data is retrieved
  • watch: Monitors data changes. The first compilation is not triggeredmountedHook, or useimmediate: trueCauses it to fire at first compile time

The difference between computed and methods

  • computedHave a cache
    • Methods in computed mainly generate new data based on data in data, and methods in computed are not invoked after the first compilation (if the data does not change), that is, they are not executed until the data is updated.
  • methodThere is no cache
    • Whenever this method is used.

What is the difference between computed and Watch

  • In most cases, computed and watch are interchangeable,
  • You can write async in watch,
  • Watch is a little bit more complicated,
  • Watch can achieve some simple functions

Is there a difference between watch and method?

  • Watch is mainly used to monitor data changes
  • Method is to write some general methods
  • There’s not much of a connection

Special remind

Do not use watch if you can use computed

37. How is AXIOS wrapped in the project?

  1. Make a request and respond to data
  2. Loading animation, carrying request headers, processing response data (request interception and response interception)
  3. queueAvoid making the same request more than once (and if animated)
  4. cancelTokenWhen switching to the next page, cancel requests related to the previous page (incomplete)

38. Application of anti-shake throttling?

Function debounce: performs a callback n seconds after an event is triggered, and if it is triggered again within n seconds, the timer is reset;

A typical case is a search input: n seconds after the input, the search request, n seconds after the input of the content, reset the timer.

Function throttling: specifies that functions can be triggered only once in a unit of time. If multiple functions are triggered in a unit of time, only one function will take effect.

A typical example is the repeated mouse click trigger, which stipulates that only one click of multiple clicks will work in n seconds.

39. How does vUE cache data to avoid rerequesting interface data?

A: Keep-alive keeps state in memory during component switching, preventing repeated DOM rendering.

40. Why cancelToken is used to cancel requests when wrapping AXIos?

A: When switching pages, the request on the previous page may not be completed. Cancel the request on the previous page to improve performance

41. Where is the location information in the project record page generally stored?

A: Browser sessionStorage

42. There are 10,000 pieces of data in the vue page, how did you render it?

A: Use paging. If paging is not possible, use a virtual list (long list) similar to the RecycleList in CubeUI

Reference documentation

  • Use of RecycleList in cubeUI

43. How are projects optimized in VUE?

A: Optimization from a code perspective; Performance optimization; Optimization from the user experience perspective

Specific optimization schemes can be referred to:

  • Vue interview questions vUE project optimization scheme

44. How to solve the problem of a blank screen on the home page?

A:

  1. SSR server rendering needs to write code with Nuxt framework
  2. If the page content does not change frequently, such as the company website, use a pre-render configuration
  3. Skeleton screen can be configured (common)

45. Describe the principle of vue-Router

  1. Custom onevue-routerClass that specifies that there must be oneinstallStatic method of
  2. Introduce customvue-routerAnd, invueUse this middleware when usedVue.useIs automatically calledvue-routerIn theinstall(Vue)Static method, passing in all the components as arguments.

import VueRouter from “./vue-router” Vue.use(VueRouter);

  1. ininstallIn static methods, useVue.mixin()Mix in one for each componentbeforeCreateMethods,beforeCreateMethod, ifmainRoot component, willmain.jsIn theParameters of the routerMount to its own _router and mount itself toIts own property _rootIf it is not the root component, mount the parent component’s _root to its own _root, (similar to recursive setting here)
  2. inbeforeCreateAdd one for each component in$router 与 $routeThe properties of the$routerPoint to customvue-routerStatic method in;$route points to attributes in the current stored pair of routes
  3. In customvue-routerSet a constructor forReceive new custom vue-RouterIs passed (mede,router…). .Convert routing formats and process different routing modes (hash,history), and save the current route after processing.
  4. In the install (Vue)Define a global router-link component, using attributes to pass values with anonymous slot definitions, to display routes when clickedTo jump.
  5. In the install (Vue)Define the global router-view component, get the current route, compare with the routing table,To render.

Vue-router schematic diagram