1. Vue common commands

  1. 14. v-bind: used to bind attributes, often abbreviated to ‘:’
  2. 5. V-on: Used for binding events, often abbreviated to ‘@’
  3. V-once: indicates that the event is triggered only once
  4. V-if, V-else -if, V-else: Used for conditional rendering of source data
  5. V-show: Used for element conditional rendering
  6. V – – HTML text and v:
V-text is equal to innerText and V-html is equal to innerHTMLCopy the code
  1. V-model: Bi-directional data binding for form controls and components.
  2. V-clock: Used with CSS to hide elements before data is loaded.
  3. V-for: Traversal rendering of source data

2.Vue modifiers

  1. Form modifier
    • .lazy: listens for the onchange event of the input control
    • .number: limits the input type of the input control to number
    • .trim: Whitespace used to filter the first digit of form input
  2. Event modifier
    • . Stop: Prevents events from bubbling
    • .prevent: The default behavior of preventing events
    • .self: used when the event is triggered on its own
    • .capture: Adds an event listener to capture mode so that sub-element events trigger events that need to pass through the.capture binding first.
    • .once: indicates that an event is triggered only once
    • .passive: Trigger the rolling action immediately
  3. Mouse button modifier
    • . Left: Left click
    • . Middle: Press the middle key
    • . Riht: Right click

3. What’s the difference between v-show and V-if?

  1. V-show displays the CSS property display:none; To control element implicit, v-if is to control element implicit by whether the DOM element exists.
  2. V-if is lazy and does nothing if it is false when first rendered. Local rendering is only possible when the condition first turns true.
  3. V-if has a high switching cost and V-show has a high initial rendering cost.

4. Two-way data binding for Vue?

  1. Step 1: You need to recursively traverse the Observe data object, including the property of the child property object, with setters and getters so that assigning a value to that object triggers the setter, and you can listen for data changes

  2. Step 2: Compile parses the template instruction, replaces the variables in the template with data, and initializes the render page view, binds the corresponding node of each instruction to update function, adds the subscriber that listens to the data, receives notification once the data changes, and updates the view

  3. Step 3: The Watcher subscriber acts as a communication bridge between the Observer and Compile. It mainly does the following: Update () = deP = deP = deP = deP = deP = deP = deP = deP = deP;

  4. Step 4: MVVM, as the entry of data binding, integrates Observer, Compile and Watcher, uses Observer to monitor its model data changes, and uses Compile to parse and Compile template instructions. Finally, Watcher is used to build a communication bridge between Observer and Compile to achieve data change -> view update; View Interactive Changes (INPUT) -> Bidirectional binding effect of data model changes.

5. What event does v-model bind to input?

The input event

6. Vue lifecycle

  • beforeCreate

After the instance is initialized, observations of the data can be made to initialize non-responsive data variables.

  • created

Data and Method have been bound to the Vue instance.

  • beforeMount

The template is compiled but not mounted, and the DOM cannot be obtained

  • mounted

The component hangs in the finish and can be retrieved directly into the DOM

  • beforeupdate

Called when a reactive data update is complete

  • updated

Called after the virtual DOM is rerendered and patched, the component DOM has been updated to perform DOM-dependent operations

  • beforeDestroy

This step is often used to destroy timers and unbind global events

  • destroyed

The Vue instance is destroyed, and all event listeners and all subinstances are destroyed

7. The difference between watch and computed

  • computed

Computed properties, depending on other properties, and when other properties change the next time you get computed values will change, computed values will be cached

  • watch

If you want to listen deeply, you add a “deep:true”. If you want to listen immediately, you add “immediate:true”

8. What is the value of key in v-for?

Key in V-for is mainly used in Diff algorithm. By judging the unique key value of element node, it can determine whether the old and new nodes have changed. Using key values is a huge efficiency boost.

9. Component communication of Vue

  1. Parent to Child: The parent sets v-bind+ the child sets props to get the parameters of the parent

  2. Child to parent: This.$emit pushes a method to the parent, which listens on the method via V-ON and retrieves its parameters

  3. $bus:

    Communication between components can be achieved by declaring a new vUE instance, $Bus, bound to the prototype of the VUE

    Vue.prototype.Event=newVue(); $emit(Event name, data); $on(Event name,data= > {});
Copy the code
  1. Communicate between components through Vuex.
  2. Similar to the first parent setting v-bind, the child gets the attribute through this.$attrs.
  3. Ancestor components provide data using provide, and descendant components inject data using Inject.
  4. Through parent and parent and parent and children.
  5. Get the child component instance and the value of the child component through refs.

10. Do you know about VUE routing? What are the patterns and what are the differences?

  • Vue routes have hash mode and history mode
  • Hash mode changes the front-end route by listening for window.hashchange and emulates a hash using the HASH in the URL to ensure that the page does not reload when the URL changes.
  • History is an alternative route that takes advantage of HTML5’s new API pushState and replaceState implementations.
  • PushState specifies that the new URL can be any URL of the same origin as the current URL, and the hash must be a URL in the same directory as the current URL.

11. What is common in ES6

  1. New data types Symbol, map, set, WeakMap,WeakSet
  2. Template string ‘ ‘
  3. Let const keyword
  4. Destruct assignment of an array object
  5. Arrow function
  6. Class and super extends
  7. Default values for function arguments
  8. promise
  9. Extended operators…
  10. for in , for of

12. New CSS3 features

  1. The rounded border – the radius
  2. Shadow border – shadow
  3. Transition the transition
  4. Flip the transform
  5. Animation animation
  6. Media enquiries @mdeia
  7. Flex layout
  8. Background: background-clip background-origin background-size
  9. Text-overflow :ellipsis; text-overflow:ellipsis; // Beyond changes to ellipsis text-shadow Text shadow

13. The difference between localStorage and sessionStorage, and the difference between cookie, whether cookie can cross domain

  • LocalStorage: localStorage

Life cycle: Always in scope as long as you don’t manually delete: locaStorage can be shared with different presentation pages in the browser

  • SessionStorage: sessionStorage

Life cycle: Clear scope when browser or TAB page is closed: Iframe under TAB page can share sessionStorage

  • cookie

Life cycle: Generally generated by the server, you can set the expiration time. Features: Each HTTP request carries cookies, which can cause performance problems. You can set shared cookies by setting document.domain

14. What are the differences between arrow functions and ordinary functions?

  1. This of the arrow function is the this of the normal function nearest it
  2. Arrow functions have no arguments
  3. Arrow functions have no prototype and do not support new
  4. Arrow functions do not perform function promotion
  5. Cannot be a Generator function

15. Grid

Grid layout

16. Flex is horizontally and vertically centered

div{
    width: 100vh;
    height: 100vh;
    display: flex;
    /* justify-content: center; align-items: center; The first method */
}
p{
    margin: auto;    /* The second method */
    border: 1px solid red;
}
Copy the code

17. Flex: Auto vs. Flex :1

When the flex value is auto, the calculated value is 1, 1 auto, and the following is equivalent:

.item {flex: auto; }.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
Copy the code

If flex is a non-negative number, the number is flex-grow, flex-shrink is 1, and flex-basis is 0%.

.item {flex: 1; }.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
Copy the code

18. What is the difference between promise and async await

  1. A promise can catch an error, and an async await error can only be caught with a try catch
  2. Async code is much simpler than promise code. There is no need to write anonymous functions to deal with Promise and RESlove. A large number of data and RES must be declared to avoid code nesting.
  3. Async is to return a function as a promise. After await, await can receive a promise and wait for the promise to be completed before receiving the return value.

19 The result of resolve(1) and resolve(2) is 1 or 2

new Promise((reslove, reject) = > {
    reslove(1)
    reslove(2)
}).then(res= > {
    console.log(res);
})
//  1    
Copy the code

The difference between vuE2 and vuE3

The responsivity principle of Vue3 uses Proxy Proxy, and the responsivity principle of Object. DefineProperty is used for Vue2. Compare the two:

  1. Vue3 processes both objects and arrays at once, whereas Vue2 requires an expensive recursive traversal.
  2. Vue2’s inability to listen for array responsivity for newly added or deleted properties requires additional implementation
  3. Vue2 Map, Set, and Class cannot be modified in response

21. What is Vue’s Nexttick? Usage scenarios

NextTick means that a deferred callback is executed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM. Application Scenarios:

  1. Used to manipulate the DOM after the Created lifecycle
  2. Use v-show to bring elements into focus after they are displayed

22. The function and usage of keep-alive

When a component is switched, the destruction life cycle is triggered. To preserve the state of the previous component, we can use keep-alive. Meanwhile, keep-alive brings in two new lifecycle functions activated(when the page is active) and deactivated(when the page is inactive).

23. Inheritance methods and advantages and disadvantages

  1. Prototype inheritance

Handwritten deep copy