1. Browser input a url parsing process

2. TCP three-way handshake: To establish a TCP connection, the client and server need to send a total of three packets; 3. - The client sends a connection request; - The server responds with an acknowledgement reply; - The client is responding with a confirmation reply. The connection is successful. 3. Initiate HTTP request: The client sends AN HTTP request to the server. 4. Server response; 5, browser parsing rendering page: - The browser will parse HTML, SVG and other ELEMENTS into DOM tree, CSS resources into CSS tree-JS through DOM tree and CSS tree to generate render tree to complete the page initialization.Copy the code

2. Diff algorithm in VUE

1. How did Diff come to be? Vue uses the bidirectional binding principle to realize the update of view layer and data layer at the same time. When the data layer changes, virtual DOM is used to update the corresponding DOM tree. How to compare the new DOM tree with the old DOM tree? Update on the real DOM. 2. How? -- Dom-diff in vue is also called patch, which means to patch. The overall diFF process follows the depth-first, same-layer comparison strategy. The comparison of two nodes will do different operations based on whether they have children and text nodes: Compare child nodes: the first and last nodes will be compared four times, and if they cannot be found, they will be searched through traversal; With key you can find the same node very precisely; Create node: create a node in the old oldVNode if the new VNode does not have one. Delete node: If the new VNode does not have one and the old oldVNode does, it is removed from the old oldVNode. Update node: If both the new VNode and the old oldVNode exist, the old oldVNode will be updated based on the new VNode.Copy the code

3. Virtual DOM of Vue

Virtual DOM is essentially a native JS object to describe a DOM node, which is a layer of abstraction from the real DOM. Advantages: 1. No manual OPERATION of THE DOM is required, reducing the operation of the native DOM and improving performance. 2. Cross-platform compatibility, since the virtual DOM is essentially a JS object that is platform independent. Disadvantages: Rendering a large number of DOM for the first time is slower than the direct innerHtml due to a layer of virtual DOM calculations.Copy the code

4, vUE response principle

Data response in VUe2.x: 1. Using data hijacking + observer mode to achieve; 2. 2. Hijack Object attributes internally with object.defineProperty; Create an observer that converts each property to getter/setter form to detect changes in the data. 4. Each property has its own DEP property, which stores the watcher it depends on. When the property changes, it will notify its corresponding watcher to update it. In VUe3.0, proxy is used to realize data response. Advantages of proxy: Proxy can directly listen on objects rather than attributes; Proxy can directly listen to arrays; The proxy returns a new object, which can only be modified by iterating over object properties. Cons: Poor compatibility.Copy the code
Function defineReactive(obj,key,val){object.defineProperty (obj,key,val); get(){ return val } set(newVal){ if(newVal ! == val){ observer(newVal); val = newVal; } } }) } function observer(obj){ Object.keys(obj).forEach(key=>{ defineReactive(obj,key,obj[key]) }) }Copy the code

New features of vue3.0

1. Static tree lifting: Vue3's compiler can detect what is static and improve it, reducing rendering costs. 2. Static attribute promotion: The nodes whose attributes do not change are skipped in diff algorithm; 3. Proxy-based data response: the initialization speed of component instances is improved, memory overhead is saved, and low browser compatibility problems exist; 4. Add setup options to composition API 5, support TS, tree shake optimization, etc.Copy the code

6. How vUE scoped works

1. Scoped's purpose is that its CSS styles only apply to the current VUE component, so that component styles don't contaminate each other. 2. Implementation principle: PostCSS; Postcss adds a unique dynamic property to all the DOM in a component, and adds an additional property selector to the CSS selector to select the DOM in the component. This makes the style apply only to the DOM element containing the property (the dom inside the component). 3. Scoped: How do I change the style of third-party plug-ins introduced inside a component? 'Outer >>> third party component' style 'Copy the code

Why not use index for vue key?

Key is used in the virtual DOM to update the virtual DOM more efficiently. 1. If index is used as the key value, when deleting or adding an element, the key value of other elements that have not changed will also change. In this case, when diff is calculated, the key value of other elements will be re-compared and rendered, which will affect performance. If index is a select option and the second one is selected, delete the first one and the third one will become selected, causing bugs. 3, key needs to use a unique ID, delete new elements will not affect the relationship between the original elements and key, the original elements will not be re-rendered, in the use of select will not appear the above bug.Copy the code

Why is data a function in vue?

Because there may be multiple instances of a Vue component, using an object would cause them to share a data object, and it would be unreasonable for a state change to affect all components. A state change in the form of data returns an entirely new Data object, avoiding state contamination for multiple instances.Copy the code

9. Why does vue.set appear?

Because adding properties to reactive objects and directly changing array subscripts to change values do not trigger view updates; When nonexistent properties are added, the new properties are tracked in a responsive manner and the watcher collected by deP of the object is triggered to update. In vue, there is no defineProperty to intercept every array for performance reasons. Instead, seven array methods are overwritten: push, shift, pop, splice, unshift, sort, reverse. Changes to the index and length of an array in vue are not detected, and the overwritten methods are triggered manually to notify all dependencies of the array to be updated.Copy the code

How does a.vue file turn into executable code?

Convert template to render: 1. Convert template string to AST; 2. 2. Carried out static node marking for AST, mainly used for rendering optimization of virtual DOM; 3, use ast to generate the render function code.Copy the code

To be updated later ~