(1) Using the subscription-developer mode, when Vue is initialized, Object.defineProperty () will be used to add getters and setters to each property in the data , and at the same time create dep and watcher for dependency collection and distribution updates, and finally compare the new ones through the diff algorithm The difference of the old vnode, updated immediately through patch

(2) Use the Object.defineProperty object and the hijacking + publish-subscribe mode of object properties.

grammar:

Object.defineproperty( object，‘ propName ’ ，descriptor)；

object: the target object to monitor

propName : The name of the property to define or modify.

descriptor: The attribute descriptor to be defined or modified, and the operation details.

// 基本使用
const obj={
   name: 'zhangsan',
}
Object.defineProperty(obj, 'name', {
    get() {
        console.log('触发get')
        return value
    },
    set(newValue) {
        if (newValue !== value) {
            console.log('触发set')
            value = newValue
            //updateView()
        }
    }
})
obj.name  // 触发get
obj.name='小小'  // 触发set

2. What are the disadvantages of vue2 data binding? How does vue3 solve it?

In Vue2.0, Object.defineProperty()methods are used for data proxying, but this method cannot proxy data attributes of array types. In Vue2.0, array changes are monitored by rewriting array methods. In Vue3.0, use the new features of ES6 Proxyfor data proxy, and you can easily monitor the changes of the array.

Question 1: Can Object.defineproperty monitor the new and deleted properties of the object?
No
, the developer needs to actively call the corresponding method to update: Vue.set(), Vue.delete, because Object.defineProperty hijacks the properties of the object, so when adding a property, it is necessary to traverse the object again and add it The property is then hijacked using Object.defineProperty.
Question 2: Can Object.defineproperty monitor the addition and deletion operations of the array?
No
, you can still update data with Vue.set() and Vue.delete. Seeing this, some students may have doubts, so why do I use push to add data to the array in the project, without calling set , the page can update the response, that is because vue2.0 implements the response of the array using the method of array rewriting, and the 7 methods are 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'.
Question 3: If I just change the value of the index of the array, for example: vm.items[indexOfItem] = newValue, can it really not be monitored?
The answer
is: Yes, Object. defineProperty can monitor it, so why doesn’t vue add monitors, because performance is for objects, every data change will enumerate the properties of the object once, and the number of properties of the general object itself is limited, so for traversal enumeration The performance loss caused by such methods is negligible, but what about arrays? The number of elements contained in the array may reach tens of thousands. Assuming that enumeration/traversal is triggered for each update of the array elements, the performance loss caused by it will not be directly proportional to the user experience obtained, so Vue cannot detect the array. change.

Furthermore, note: Object.defineProperty() is in-depth monitoring and needs to be recursive to the end. One-time calculation is very heavy.

(1) Because vue2.0 object.defineProperty can only hijack object properties

The biggest disadvantage is that it cannot detect the changes in the array in real time , and cannot monitor the changes in the array subscripts, resulting in the disadvantage that the elements added through the data subscripts cannot respond in real time. In order to solve this problem, after the internal processing of vue, you can use push(), pop(), shift(), unshift(), splice(), sort(), reverse() for hack processing, so other array attributes are also monitored No, it has certain limitations.

(2) Proxy is a direct proxy object

Because object.defineProperty can only hijack object properties, each property of each object needs to be traversed. In vue2.0, data monitoring is realized through recursion + traversal of data objects. If the attribute value is an object, deep traversal is also required. Unlike Object.defineProperty, Object.defineProperty can only hijack the properties of objects, while Proxy is a direct proxy object. Because the proxy is a proxy for the entire object, it can monitor changes in the value of a certain attribute of the object, and can also monitor the addition and deletion of object properties, and it can also monitor arrays

(3) Proxy can not only proxy objects, but also proxy arrays, and can also proxy dynamically added properties

The proxy in Vue3.0 can not only proxy objects, but also proxy arrays, and can also proxy dynamically added properties . There are 13 hijacking operations: get Get a key value (receive 2 parameters, target value and target value key value) set set a key value (target value, target key value, value to be changed, original value before change) apply use the in operator to determine whether a key exists deleteProperty delete a property defineProperty define a new property …

3. Vue's keep-alive component

keep-alive is a built-in component that wraps components that cache state across renders. Used in scenarios where custom components need to maintain the same state across different renders. For example, some form components, if you have filled in some content, then switch to other components, and then switch back to the form, you should keep the filled content. At this time, you can choose to use keep-alive

4. Vue parent-child component communication, brother component communication

(1) There are 3 ways to communicate between parent and child components

a: The parent component calls/obtains the parameters/methods in the child component through ref

b: The child component calls the parent component method through emit

c: Child components get parent component variables through props

(2) Common methods of brother component communication

eventBus is a vue instance, using the $on and $emit provided by it can easily implement the publish and subscribe mode, so as to realize the communication between sibling components.

See this article for specific content: Vue parent-child component communication, brother component communication - Seven Hills Blog - CSDN Blog

Five, the principle of webpack

webpack reads the configuration, starts traversing files according to the entry, parses dependencies , uses loader to process each module , and then packages the files into bundles and outputs them to the directory specified by output.

The workflow of webpack is:

Webpack CLI starts the packaging process and parses configuration item parameters.
Load the Webpack core module and create a Compiler object.
Register plugins.
Use the Compiler object to start compiling the entire project.
Starting from the entry file, the module is parsed as AST, module dependencies are analyzed, and a dependency tree is formed.
Recursive dependency tree, handing over each module to the corresponding Loader for processing.
Merge the results processed by Loader, and output the packaging results to the dist directory .

6. Common webpack plugin and loader

loader (for converting certain types)

1. babel-loader // process js

2. file-loader, url-loader // processing pictures, font icons

3. less-loader, sass-loader, stylus-loader // handle various css preprocessors

4. css-loader // parse the css module

5. style-loader // insert the style into dom

plugin (plugins can be used to perform a wider range of tasks)

1. html-webpack-plugin // generate html files and automatically import js bundle into html

2. clean-webpack-plugin // Clear the last packaging result every time it is packaged

3. copy-webpack-plugin // perform copy operation

4. mini-css-extract-plugin // extract css files

Seven, reflow and redraw

(1) rearrangement (reflux)

If JavaScript modifies the geometric properties (position, size) of DOM elements, etc., the style will be recalculated, and the layout tree needs to be updated, and then the subsequent rendering operations will be performed, that is, the steps from 1 to 9 need to be re-executed. This process is called "rearrangement". Changes in the position and size of elements on the page , causing some pages to reload the entire page is called reflow (reflow)

(2) Redraw

If JavaScript modifies the non-geometric properties of the DOM, such as modifying the background color of an element , there is no need to update the layout tree and rebuild the hierarchical tree, only to redraw it.

When the page is running, rearrangement and redrawing should be avoided as much as possible to improve rendering performance.

(3) Redrawing does not necessarily lead to rearrangement, rearrangement must lead to redrawing

Eight, the box model

(1) Introduce the box model of CSS

CSS treats each element as a box, and each box includes four parts: content, padding, margin, and border. This abstraction of interface elements is called the box model. The box model is the basic unit of CSS layout

(2) What are the standard box model and the weird box model

There are two box models: IE box model (also called weird box model) (border-box), W3C standard box model (content-box)

(3) The difference between the ie box model and the w3c box model (neither including margin)

W3C standard box model: the attributes width and height only contain content , not border and padding.

IE box model: attribute width, height contains content, border and padding , which refers to content + padding + border

9. What are the CSS selectors?

id selector (#myid)

class selector (.my-classname)

tag selector(div,h1,p)

Sibling selector (li~a)

Pseudo-element selectors (::before, ::after)

Pseudo-class selectors (a:hover,li:nth-child)

Ten, css centered

(1) Horizontally centered

Centering of inline elements : parent elementtext-align: center;
Block-level elements are centered : after specifying the width, set margin: auto

width: 100px; margin: 0 auto;

(2) Center vertically

Centering inline elements : set line-heightand heightequal.
Centering block-level elements
- flex
- Unknown height: achieved with margin-top: 50%;+translate: -50%
- known altitude

Using the new property of CSS3 calc, calculate top,top: calc(50% - 50px);

用top + margin-top实现

position: relative;
height: 100px;
margin-top: 50%;
top: -50px;

11. What is the difference between the elements of block, inline and inline-block

（1）block

Block elements: Occupy a single line; the width, height, and inner and outer margins of the element can be set; the width of the element is 100% of its parent container if it is not set.

（2）inline

Row elements (inline elements): Modifying the horizontal size (padding, margin, border) in the horizontal direction can produce corresponding effects, and the height of row elements in the vertical direction has no effect.

Therefore, it is meaningless to directly define the width and height of inline elements, and the width and height of inline elements are supported by the content.

However, you can specify the height of line elements by setting line-height. It can be converted into a block element by setting the display attribute on the row element, display：block.

(3) The attribute value of display

blockblock type. The default width is the width of the parent element, width and height can be set, and it will be displayed in a new line.
noneThe element is not displayed and is removed from the document flow.
inlineInline element type. The default width is the content width, the width and height cannot be set, and they will be displayed in parallel.
inline-blockThe default width is the content width, width and height can be set, and displayed in a row.

Eight-Part Essay (4)

1. Vue2's two-way data binding principle