Summary of the most complete knowledge points for getting started with vue3 (combined with codewhy video summary)

1. Basic grammar

1. this in vue points to the problem

In fact, the source code of Vue traverses all the functions in methods, takes out each function, and binds this through bind

2. mustache syntax

The object returned by data is added to Vue's responsive system.
When the data in data changes, the corresponding content will also be updated.
Mustache can be not only an attribute in data, but also a JavaScript expression (except for judgment statements and assignment statements)

3. Infrequently used commands

v-once: Used to specify that an element or component is only rendered once

• When the data changes, the element or component and all its child elements will be treated as static content and skipped
• This instruction can be used for performance optimization
• The parent node is bound to v-once, and all child nodes will only be rendered once

v-text: update the textContent of the element equivalent to mustache syntax

v-html: The displayed content itself is htm that can parse HTML

v-pre: used to skip the compilation process of the element and its child elements, displaying the original Mustache tag

• p skips nodes that do not need to be compiled to speed up compilation

4. Common commands

v-bind (binding attribute class name style, etc.)
- (abbreviated colon), bind one or more attributes, or pass a value to another component

• bind attribute (src in img)

• Binding class name (1. Ordinary binding 2. Object form, object binding can be multiple bindings 3. Binding object 4. Binding method, obtained from the method)

• Binding style: style="{'color':'red','font-size':'40px'}"
  v-on (binding time interaction)

• Abbreviated @ symbol, @+time name

• Binding function @click="function name" pass parameter @click="function name ($event,'why')"
  function (event) { console.log(event) }
  
  

• Modifier
  
  v-if v-else v-else if (conditional rendering)

• Render based on boolean

• These three exist at the same time and only one will be executed

• 
  When the condition is false, the judged content will not be rendered at all or the template element will be destroyed (combined with the conditional judgment statement)

• Because v-if is an instruction, it must be added to an element. At this time, we render div, but we don't want the element of div to be rendered

• The template element can be used as an invisible wrapping element (similar to the template tag in html)

v-show

• Display and hide elements by controlling display in CSS

Interview questions:
1. The difference between v-show and v-if
1. In terms of usage, v-if can be used together with the template tag, but v-show cannot be used together with v-else
2. Essentially, when the condition of v-if is When false, the corresponding native elements will not be rendered into the DOM at all
. 3. During development, the required native elements need to be switched back and forth between display and hiding, so v-show should be used to reduce rearrangement and redrawing, and will not Use v-if for frequent switching.
2. Rearrange and redraw
1. Browser key rendering path: DOM\CSSDOM > generate rendering tree > determine the size and position of all content on the page through the layout step > draw after determining the layout (pint ) to the screen
2. Rearrangement and redrawing are two nodes of the browser's critical rendering path. The browser's critical rendering path is to generate a rendering tree from DOM and CSS, and then determine the page through a layout step according to the rendering tree After determining the layout of all content sizes and positions on the screen, the pixels are drawn to the paint screen.
3. Rearrangement means that when the position structure of elements changes, the browser re-executes the layout step to re-determine the content and size on the page . Redrawing
4. If the position of the element has not changed, but only the style has changed, the rendering step of the browser will skip the layout step and directly enter the drawing step. This process is redrawing, so redrawing does not necessarily lead to redrawing Row.
3. What is the function of the key in v-for?
1. The key attribute is mainly used in Vue's virtual DOM algorithm to identify VNodes (virtul node virtual nodes) when comparing old and new nodes (nodes)
2. In fact, Vue will call two different methods for having a key and not having a key; if there is a key, then use the patchKeyedChildren method
; , When the data changes, how does vue update the node?

1. We first generate a virtual DOM based on the real DOM. When the data of a node in the virtual DOM changes, a new Vnode will be generated, and then the Vnode will be compared with the oldVnode (this is the diff algorithm). If there is any difference, we will directly Modify it on the real DOM, and then make the value of oldVnode Vnode.
2. The process of diff is to call a function called patch, compare the old and new nodes, and patch the real DOM (add new nodes) while comparing.
   Five, the difference between virtual DOM and real DOM?
   Virtual DOM extracts the real DOM data and simulates the tree structure in the form of objects. Both
   VNode and oldVNode are objects.
   

v-for (list rendering)
In real development, we often get a set of data from the server and need to render it. v-for is similar to JavaScript's for loop and can be used to traverse a set of data.

• The basic format of v-for is "item in array": p array usually comes from data or prop, or other ways;
• item is an alias we give to each element, this alias can be customized to define
  
  

v-for also supports traversal of numbers: each item of p is a number;

Array update detection

Vue wraps the method of array change, which will trigger the update of the view. The wrapped method is
push() pop() unshift() shift() splice() sort() reverse() The
above method will directly modify the original Arrays, but some methods do not replace the original arrays, but generate new ones, such as filter(), concat(), and slice().

5. Virtual DOM+diff algorithm

• Virtual node: In fact, whether it is a component or an element, they are finally expressed in Vue as a VNode, and the essence of a VNode is a JavaScript object
• Virtual DOM: If we are not just a simple div, but have a lot of elements, then they should form a VNode Tree
• diff algorithm:
• Comparison method: when using the diff algorithm to compare new and old nodes, the comparison will only be performed at the same level, and will not be compared across levels
• When the data changes, the set method will call Dep.notify to notify all subscribers Watcher, and the subscribers will call patch to patch the real DOM.

2. Built-in Api

1.computed

• For any complex logic that contains responsive data, remember that it is bound in a property, not a method. The method is written in methods, so when calling the properties in computed, you don’t need to add ()

Mainly used for complex data processing logic
1. Template syntax

• There is a lot of logic in the template, which is inconvenient to maintain
• When there are many times the same logic, there is a lot of code
• When used multiple times, many operations are also run multiple times, without caching, performance loss
  2.methods
• We only need the calculation of a result, but it will all become a method call
• There is no cache, and many operations have to be run multiple times

Advantages: caching
p This is because computed properties are cached based on their dependencies;
p When the data does not change, the computed property does not need to be recalculated;
but if the dependent data changes, the computed property is used will still be recalculated;

The setter and getter of a computed property
only need a getter method, so we will write the computed property directly as a function. n But what if we really want to set the value of a computed property?
At this time, we can also set a setter method for the calculated property;

How does the source code handle setters and getters
? How does Vue internally handle what we pass in as a getter, or an object containing setters and getters
?
p is actually very simple. The Vue source code just makes a logical judgment to judge whether it is a function.

listener watch

v-model

Global components and local components

Packaging project (vuecli, webpack)

SFC: single file
webpack in node environment

fast

Webpack is currently the most used construction tool for the entire front-end, but there are other construction tools besides webpack:
p such as rollup, parcel, gulp, vite, etc.