vue

$nextTick(function func)

  • Vue for asynchronous updates to the DOM
  • DOM manipulation done by the Created () hook function in the Vue lifecycle must be placed in the vue.nexttick () callback,
  • The DOM doesn’t actually render at all when the Created () hook function executes.
  • An operation to be performed after data changes that requires the use of a DOM structure that changes as data changes should be placed in the vue.$nextTick() callback.

Props and $emit

  • A parent component can use props to pass data to a child component.
  • Child components can use $emit to trigger custom events for parent components.
$on(event, fn); $on(event, fn); // The parent component is bound to the event and runs fn after listening for the event;Copy the code

V-bind, short for:

  • The V-bind directive is used to set attributes for HTML tags. You can set attributes with modifiers such as class and :style.
  • It is also possible to bind computed properties (computed), where data in the state is static and computed properties can be computed

V-on, @

  • The V-on directive listens for DOM events in a similar way to v-bind, such as adding click events to a button

V-if, V-else, V-else -if

  • V-if is a conditional render instruction that removes and inserts elements based on whether an expression is true or false
  • Basic syntax:

v-if=”expression”

  • Expression is an expression that returns a Boolean value. An expression can be a Boolean property or an expression that returns a Boolean.

v-show

  • The v-show command is similar to the V-if command, but the v-show command renders HTML regardless of whether the condition is true, which is controlled by display
  • V-if will render only if the condition is true

v-for

  • The V-for directive renders a list based on an array, which is similar to JavaScript’s traversal syntax

v-for=”item in list”

The components properties

  • Reference another property in a component
<template> <! </my-component> </my-component> </template> <script> //1. Import MyComponent from './ myComponent. vue' export default {//2. Then, inside components, write the child components: {MyComponent}} </script>Copy the code

.native

  • Binding native events to custom components in Vue requires the addition of a. Native modifier

Listening properties (Watch)

/ / way
watch: {
  a(newVal, oldVal) {
    / /...}}2 / / way
watch: {
  'a.b': {
    handler(newVal, oldVal) {
      // ...
    },
    deep: true.// Deep monitor
    immediate: true.// Trigger immediately}}Copy the code
  • An object, the key is the expression to observe, the value can be the corresponding callback function, the name of the method, or the object containing the option.
  • The Vue instance will call $watch() at instantiation time, iterating through each property of the Watch object.

PS: arrow functions cannot be used

Calculate attribute

  • Calculation properties will be mixed into the Vue instance, with getters and setters modified for two-way data binding
  • The result of the calculated property is cached, except for the recalculation of dependent reactive property changes.

PS: If a dependency (such as a non-reactive property) is outside the scope of the instance, the calculated property is not updated

computed: {
  / / read only
  aDouble: function () {
    return this.a * 2
  },
  // Read and set
  aPlus: {
    get: function () {
      return this.a + 1
    },
    set: function (val) {
      this.a = val - 1}}}Copy the code

mixins

  • Vue mixed in mixins – usage, considerations, and source code analysis

The timer

  • If a component has a timer added during creation and use, the timer needs to be cleared when the component switches and shuts down
Destroy timer (){clearTimeout(this.timer)} when the component is destroyed(i.e. switching the component or closing the page), call the destroyed method to clear the timer (){clearTimeout(this.timer)}Copy the code

Vue responsive principle

  • Understand the principle and implementation of Vue bidirectional binding
  • Vue responsive basic principle: Vue passes through internallyObject.definePropertyMethod property interception in the way thatdataThe read/write of each data in the object is converted togetter/setterNotifies the view of updates when data changes.
  • The publish-subscribe model is used in the implementation, with views as subscribers and data as publishers, and a dependency collector (subscriber management) is added to notify all subscribers of updates when data is updated.

vuex/mutations

  • Mutation in Vuex is a synchronous transaction, that is, mutation function in mutations must be a synchronous function, and asynchronous function cannot be traced

vuex/actions

  • Action is similar to mutation, but differs from mutation:
    1. The action commits mutation instead of directly modifying the state;
    2. Actions can contain asynchronous operations

React

React Vs Vue

React Event binding

  1. Bind this in the constructor by bind
  2. Use arrow functions on components
  3. Experimental features: Binding via anonymous arrow functions

One-way data flow (one-way binding) and bidirectional binding

  1. Unlike Vue two-way binding, React does not recommend two-way binding because it loses the one-way data flow feature and makes data difficult to trace.
  2. React uses props to pass Function, and calls Function passed in by the parent to change the parent’s statestate->propsThe unidirectional flow characteristics of the

React slot and Vue slot (Slot)

  • The child component is rendered by using props. Children to get the element that the parent fills in the slot. This usage is equivalent to the default slot in Vue, where the children property comes with a prop
// child component
function DefaultSlot(props) {
  return (
    <div>
      {props.children}
    </div>)}// parent component
function App(props) {
  return (
    <DefaultSlot>
      <div>slot</div>
    </DefaultSlot>)}Copy the code
  • The parent component can pass in the React element via a custom prop for child components to render, since the React element is essentially an object (virtual DOM).
// child component
function NamedSlot(props) {
  return (
    <div className="container">
      <div className="left">
        {props.left}
      </div>
      <div className="right">
        {props.right}
      </div>
    </div>)}// parent component, Left & Right is two component, it can be a React DOM, too
function App(props) {
  return (
    <NamedSlot
      left={<Left />}
      right={<Right />} / >)}Copy the code

React props and state

If you think of a component as a function, props is an input parameter of the function that cannot be edited, and state is an internal variable that can be modified. Given an input parameter (props), it returns a unique ReactDOM

SetState Can be updated synchronously or asynchronously

In React, setState is called to update this.state asynchronously if an event is handled by React (such as by onClick). Other setState calls execute this.state synchronously (update directly, no batch processing). “In addition” refers to the event handlers added directly via addEventListener, bypassreact, and the asynchronous calls made via setTimeout/setInterval.

Three questions of state Philosophy:

  1. Is this data passed by the parent component via props? If so, it should not be state.
  2. Has the data remained the same over time? If so, it should not be state either.
  3. Can you calculate the value of this data based on other states or props? If it is, it’s not state.

Embedded components <Fragment>

  • This component will not render on the real node and can accept props, equivalent to
  • <>

JavaScript

How do I determine the value of this

JavaScript digs into this from the ECMAScript specification

Number (6) with the new Number (6)

  • Number Global objects are created by the Number() constructor, which returns a primitive type, and objects are created through the constructor
6= =Number(6) = =new Number(6) // true calls valueOf()
6= = =Number(6) // true
6= = =new Number(6) // false
Number(6) = = =new Number(6) // false
Copy the code

A problem with the arrow function this binding

  • Arrow functions do not have their own this value. Arrow functions use this values from the function scope chain, which follow the same rules as ordinary variables
  • The arrow function’s this always points toWhen the function definition takes effectObject where.
  • When the function definition is in effect (defined), the call() method cannot change this
var obj1 = {
  name: 'obj1'.print1: function () {
    return () = > {console.log(this.name)}
  },
  print2: function () {
    return function() {console.log(this.name)}
  }
}
var obj2 = {name: 'obj2'}
obj1.print1()() // obj1
obj1.print1().call(obj2) // obj1 obj1.print1() arrow function is in effect, call cannot change this
obj1.print1.call(obj2)() // obj2 obj1.print1 gets the code and the function is not in effect. Call can then change this to point to obj2 and execute to make the arrow function definition work

obj1.print2()() // undefined
obj1.print2().call(obj2) // obj2
obj1.print2.call(obj2)() // undefined
Copy the code

The scope chain

  • Article read JS operation mechanism

inheritance

  • ES6 and ES5 inheritance resolution

async/await

“Await” is not just used to wait for promises. It can wait for the result of any expression, so “await” is actually followed by ordinary function calls or direct quantities.

  • If it waits for something other than a Promise object, the result of the await expression operation is what it waits for.
  • If it waits for a Promise object, await is busy and blocks the following code, waiting for the Promise object resolve, and then getting the value of resolve as the result of the await expression.

JS single thread cause

  • JS was designed to operate DOM at the beginning, if multithreading, a DOM node deleted in other threads, the current thread will have problems, at this time the introduction of lock will undoubtedly increase the pressure of the browser engine, the original resources are not much, so single thread

Macro and micro tasks

  • As the JS engine thread and GUI rendering thread are mutually exclusive, in order to make macro tasks and DOM tasks orderly, the browser will start rendering the page after the execution of one macro task and before the execution of the next macro task. Microtasks can be understood as after the execution of the current macro taskExecuted immediatelyThe task of

Macro Tasks -> Micro Tasks -> GUI Rendering -> Macro tasks ->…

  • Interviewer: How much do you know about EventLoop?

Inner workings of the new operator


function myNew (func// 1. Generate an objectlet obj = new Object(// 2. Set the prototype to point to the constructor's prototype objectobj.__proto__ = func.prototype/* The two steps above can be merged */ //Object.create(The) method creates a new object, using an existing object to provide the value of the newly created object__proto__
let obj = Object.create(func.prototype) // 3. Bind execution context objectslet result = func.call(obj) // 4. Determine what result the constructor itself returns. The underlying type returns directly, and the object returns the objectreturn typeof result= = = 'object'?result : obj

Copy the code

Babel compilation process

The transformation of ES6+ into ES5 can be roughly divided into three steps:

  • Parsing code strings into abstract syntax trees, known as AST
  • The AST is processed, and at this stage the ES6 code can be transformed, that is, into ES5 code
  • Regenerates a code string from the processed AST

Babel is currently only responsible for the Parse and Generate processes, focusing on the parsing and generation phases. The transform process is all done by the Bable plugin

CSS

>>>As well as/deep/Depth action selector

  • In Vue, when scoped is used on a component, it applies only to the current component, and if you want to affect child components or “go deeper”, you can use the depth effect selector>>>As well as/deep/.

HTTPS

SSL/TLS encryption process

  1. The B side provides the SSL protocol version number, a Client random number (note that this is the first random number), the encryption method supported by the Client, and other information.
  2. After receiving the information, the S terminal confirms the encryption method used by both parties and returns the digital certificate, Server random number generated by a Server (note that this is the second random number) and other information.
  3. End B confirms the validity of the digital certificate and generates a new random number (Premaster secret). It encrypts this random number using the public key in the digital certificate and sends it to end S.
  4. The S end uses its private key to obtain the random number sent by the B end (Premaster secret). (The third and fourth steps are asymmetric encryption processes.)
  5. End B and end S use the first three random numbers to generate the conversation key through the agreed encryption method (usually AES algorithm), which is used to encrypt the following communication content.

The digital certificate

  • What is a digital certificate

Caching strategies

Read the HTTP caching mechanism

Strong cache

  1. Expires: Set in the response header, is a timestamp. If the client sends a request before Expires, the cache will be triggered and the request will not be made again
  2. Cache-Control:
    • No-cache = max-age=0; If 304 is returned, the server uses the cache. If 304 is returned, the server uses the cache. If 304 is returned, the server uses the cache. (Negotiate the cache to determine whether the cache is available)
    • No-store: no resources are cached
    • Pulic indicates that both client and proxy servers can cache
    • Private indicates that only clients can cache resources
    • Max-age Maximum cache time (in seconds)
  3. Cache-control has a higher priority than Expires

Negotiation cache (304)

If 304 is returned after verification, use local cache directly, otherwise use new resource.

  1. E-tag and if-no-match (http1.1)

The e-tag is returned by the server and written in the response header. If-no-match carries the e-tag value in the response header of the last request for the resource

  1. Last Modified and if-Modified-since (http1.0)

The time of this field represents the Last time the server changed the resource. When the client requests the resource again, the browser automatically adds an if-modified-since request header that carries the Last last-modified value.

  1. 1 s effect: This method detects changes in the minimum unit of 1s, which means that if the requested resource changes within 1s, the cache will be triggered normally, so that the client cannot obtain the latest resource.

It is worth noting that if we do not have a caching policy configured, the browser will subtract last-Modified from the Date in the response header and multiply it by 0.1 as our resource cache time.

Cache location

  1. Service Worker

    • Essentially acting as a proxy server between server and client, along with the PWA. Compared with LocalStorage and SessionStorage, the latter two are simply interface data caching, such as user information (an object) and list information (an array), while the former can cache static resources. It even intercepts network requests and makes different caching strategies according to network conditions.

  2. memory cache

    • The resource is cached in memory. In fact, all network requests are cached in memory by the browser. Of course, memory capacity is limited and the cache cannot be stored in memory indefinitely, so it is destined to be a short-term cache.
    • Control of the memory cache resides in the browser, not in the front or back end.

  3. disk cache

    • To cache resources on a hard disk, disk cache is also called HTTP CAhCE because it strictly follows HTTP response header fields to determine which resources are to be cached and which have expired. Most caches are disk caches.
    • Divided into mandatory cache and negotiated cache ()

  4. A real network request (no caching, showing the exact size of the resource)

Git

  1. Cloning of warehouse
git clone https://xxxx.git
Copy the code
  1. See the branch
git branch
Copy the code
  1. Switch branch
git checkout brachName
Copy the code
  1. Switch and create a new branch
git checkout -b newBranchName
Copy the code
  1. Delete the branch
git branch -d brachName
Copy the code
  1. Merging branches

How does Git gracefully merge code

git merge fromBranch
Copy the code
  1. Roll back the remote branch
git push -f origin
Copy the code
  1. Rename file case
git mv XXXX.md YYYY.md
Copy the code