Real learned knowledge = fully learned and understood + practiced + used more than once in business or work
quick review for personal use
- Array (223 search, sort, judgment, traversal, positioning mapping)
- string( 3slice substr replace 2 4 value index indexof search index value charAt charCodeAt)
- Object (only copy the basic data type and the address of the reference-shallow to actually realize the copy of the array object-deep [Object. and array objects]), traversing object properties
for(let key in obj){ console.log(key + '---' + obj[key]) } - Deconstruction (let [foo, [ , baz], …arr] = [1, [[2], 3], 4, 5]; array deconstruction can be nested or omitted for index, comma must be important let { round:
r ,ceil:c,floor:f } = Math; r(3.14)//3 object deconstruction (default value can be specified for attribute name) to distinguish between
deconstruction and expansion operator : expansion operator (traversing one layer of deep copy) + deconstruction assignment ( value-on-demand) = flexible deep copy of value-on-demand; - JS operation mechanism (whole code macro task executes synchronously and directly executes asynchronous registration queue after executing microtask queue -> macro -> event loop)
macro task: overall code, setTimeout, setInterval. Microtasks: Promise, process.nextTick. - Simple understanding of promises
- Synchronous asynchronous : common asynchronous operations: request, event, timing
- const p = new Promise((resolve, reject) => {console.log(1);resolve();console.log(2)})
promise.then( () => {console.log(3)}) console.log(4)// 1 2 3 4 The
Promise constructor is executed synchronously, and the function in promise.then is executed asynchronously. Chain tuning
- if there is async before the function, the function will return a Promise object, and you can use the then method to add a callback function. When the function is executed, once it encounters await, it will return first, wait until the asynchronous operation is completed, and then execute the following statement in the function body.
When this function is called, a Promise object is immediately returned.
async function asyncPrint(value, ms) {await timeout(ms); console.log(value);}
asyncPrint('hello world', 50);
The state of the Promise returned by the async function changes only after the await is executed.
The value returned by the return statement inside the async function will become the parameter of the callback function of the then method.
The await case
setup is combined with async when encountering asynchronous request logic - axios
- Time processing : time string -> (new Date(str)) -> standard time object ->.getTime() -> timestamp millisecond value timestamp millisecond value ->
(new Date(number)) -> standard time object ->.getMonth(), etc. -> year month day
understanding: the new Date() function can convert milliseconds or standard time strings into standard time format, similar to Fri Jul 02 2021 08:57:30 GMT+0800 (China Standard time), this time object contains methods to get time value and millisecond value - GIT, NPM command concept understanding
- Mix-in : When a component and a mix-in object contain options with the same name, these options will be "merged" in an appropriate manner, and the methods and data of the mix-in take precedence over the component. Global registration will affect every Vue instance created later
1. Data objects with the same name will be recursively merged internally, and component data will take precedence in case of conflict.
2. The hook functions with the same name will be combined into an array, so they will all be called. Hooks for mixins will be called before the component's own hooks.
The difference from the import component reference is equivalent to opening up a separate space in the parent component, which is essentially independent of the two - How the Vue project works](https://blog.csdn.net/qq_38577700/article/details/103184213)
- VUE project structure:
- index.html The root HTML file of a single-page application can configure the page title and mount the app root component with a DOM node
- APP.vue All VUE pages are switched under App.vue, which can be understood as the parent component of the parent component...
- main.js, initialize the vue instance, and introduce the required plug-ins (axios vuex router) It can also store global variables and start executing when running npm run dev
- vue.config.js is an optional configuration file that will be automatically loaded by @vue/cli-service. You can configure webpack, eslint inspection methods, and configure third-party plug-ins such as sass, etc.
- VUE life cycle:
- beforeCreate (the data observation and event mechanism are not formed before the vue object is created, and the DOM node cannot be obtained)
- created (the vue object instance has been created after creation, but the attribute method has not been loaded, that is, the DOM element cannot be obtained.)
- beforeMount (the specific DOM element cannot be obtained before loading the attribute method before loading, but the root node mounted by vue has been create) - mounted (after loading, ▲ commonly used asynchronous requests are written here ( otherwise the vue instance cannot be obtained after the request is completed ) and the data and DOM have been rendered)
- beforeUpdate (data changes under the data-driven principle before update, virtual DOM re-renders before update)
- updated (virtual DOM re-renders after update)
- beforeDestroy (before destruction)
- destroyed (after destruction)
- extension (compute calculation attribute) and The execution result of the method is exactly the same, but it is not a function but closer to the data data
compute: data monitoring, triggered when the dependent data changes, with cache, if the dependent data does not change, the cache value is taken; read-only but when added to the set The assignment method can be modified
: event-driven, no cache, recalculated every time it is called manually.
- Extended (watch monitoring) object, the key is the responsive property (data or computed) to be monitored, and the value is the corresponding callback function or method name
- Slot : The placeholder provided by the child component to the parent component. Indicates that the parent component can fill any template code in the placeholder.
A tool for the parent component to distribute content to the child component<slot name="header"></slot> <template v-slot:header> <template/>- Scope slot: Bind subcomponent data as an attribute of the element.
The parent component can access the child component data and change the display content.
- Scope slot: Bind subcomponent data as an attribute of the element.
子组件
<slot v-bind:user="user">{
{ user.lastName }}</slot>
父组件
<current-user>
<template v-slot:default="slotProps">{
{ slotProps.user.firstName }}<template/>
</current-user>
v-slot 的值支持解构
<slot v-bind:user="user">{
{ user.lastName }}</slot>
<current-user>
<template v-slot:default="{user: person }">{
{ person.firstName }} <template/>
</current-user>
动态插槽名
<current-user>
<template v-slot:[dynamicSlotName]> </template>[动态插槽名变量]
</current-user>
v-slot abbreviation#
-
VueX :
- Concept:
Understanding: data (state) drives the view, user interacts with the view to trigger actions, interactive actions change the state, data drives the view...one-way data flow
When the state (data) is used by multiple components, one-way data flow It is easy to be destroyed.
Multiple views rely on the same state (data), and when the multi-view behavior will change the same state, the
multi-view shared state (data) is extracted for global management. All components that depend on it form a huge macro view, that is It can solve the problem
- use :
the project is generally used to store the information and state of the logged-in user.
The core of the Vuex application is the store container, which contains most of the state (state is shared data) in your application. The
state storage of Vuex is the response In this way, the state of the store cannot be changed directly. The only way is to explicitly submit (commit) the mutation.
Each application will only contain one store instance
- getters need to operate on the obtained data to get the state attribute, which needs to be reused in multiple places can be extracted as getters functions. Parameters can be passed,this.$store.getters.functionName(param)
- mutations must be synchronous, the only way to change the state in Vuex's store, parameters can be passed,const mutations= { setCheckedList: (state, item) => {state.checkedList.push(item);} }this.$store.commit(vocabulary/setCheckedList,voc);
- actions have the same function as mutations, but can handle asynchronous, store value with $store.dispatch () method
-plugin : It is a long-term storage solution, because the data placed in the state will be lost when it is refreshed. At this time, use this plugin.js plugin to store it for you. Case 1 Case 2
- Module divides the huge store into modules. Each module has its own state, mutation, action, getter. Finally, introduce (or use webpack's require.context ) root module for use, which is also convenient for management and maintenance
- mapState, mapGetters, mapActions, mapMutations When a component needs to obtain multiple states, it will be a bit repetitive to declare these states as computed properties and redundancy. To solve this problem, we can use the mapState helper function to help us generate computed properties, saving you a few keystrokes: -
Understanding of virtual DOM (vdom) and browser bottom-level execution:
1. Create a DOM tree analyzer to analyze HTML elements and build a DOM tree
2. Create a StyleRules (CSS) CSS analyzer to analyze CSS files and inline styles on elements, and generate The style sheet for the page.
3. Create a Render tree Associate the DOM tree with the style sheet to build a Render tree
4. Layout Layout Start the layout and determine a precise coordinate for each node on the Render tree to appear on the display.
5. Draw the Painting Render tree and the node display coordinates, call the paint method of each node to draw them.- When native JS or JQ operates the DOM, the browser will execute the process from beginning to end starting from building the DOM tree. In one operation, I need to update 10 DOM nodes, then the browser will execute the process ten times. It will waste performance, cause page freezes, and affect user experience.
- Virtual DOM simulates DOM with data structure. If DOM is updated multiple times in one operation, virtual DOM will not operate DOM immediately, but save the diff (diff algorithm) content of these 10 updates in a local JS object, and finally save this JS Object one-time attch to the DOM tree
-
Proxy: Proxy object: provides interception before the operation on the target object, does not directly operate the object itself, but indirectly operates the object through the proxy object of the operation object
-
{} is not required when importing files, plug-ins, third-party libraries, and css, and
{} is not
required when importing components. a single export ) -
Understanding of VUE responsiveness:
When an object is passed into a Vue instance as data, Vue will automatically traverse the object and add getters and setters to all properties. This enables VUE to track dependencies when the object properties are accessed and modified. -
return in data in VUE:
Because the data not wrapped in return will be globally visible in the project, it will cause variable pollution.
After wrapping with return, the variables in the data will only take effect in the current component and will not affect other components. -
VUE3's combined API, setup function :
data and logic are also componentized.
Part of the data and logic of the component is separated from the component, which can realize component communication, event dispatch, and logic reuse.-
When to
call setup When creating a component instance, immediately after the initial prop resolution. Data and methods can be injected into the vue instance.
In terms of lifecycle, it is called before the beforeCreate hook. -
Parameters
Because setup is called after the props of the component are parsed, the props data passed by the parent component can be used inside the function, setup(props, context).- The props come from the parent component and need to be received by the child component declaration. They cannot be deconstructed and can listen to
context.emit. The method context.slots of the parent component
has not been found for the time being. Waiting for subsequent updates.
(and obtain) attribute binding (including class, style, event attributes bound by vue on DOM, etc.), and props are different in that:-
1. props should be declared, but attrs should not be declared
-
2. The attributes declared in props will not appear in attrs again
-
3. props does not contain events, but attrs contains
-
4. props supports types other than string, attrs only has string type
-
- The props come from the parent component and need to be received by the child component declaration. They cannot be deconstructed and can listen to
-
Case: When setup encounters asynchronous request logic, use it in combination with async In addition to conventional data and functions , you can also write public lifecycle functions
in the setup function , which are different from the lifecycle functions of VUE components and have a corresponding relationship . And similar to the rule of mixing and merging, the mixed-in method is called prior to the component method. The usage of emit in setup .
-
Main points:
- Combined API to reuse business logic: this cannot be used internally, before before create, setup() can only be synchronous and not asynchronous
- ref and reactive can be simply recorded as: basic data types use ref() to add dependent reference types to data such as objects and arrays and use reactive
-
Understanding:
In Vue2.x, we need to add new data in data to implement a function, and add business logic data and business logic in methods/computed/watch are separated, which is not conducive to management. In order to solve this drawback, Vue3 .0 launched the Composition API (composition API), also known as the injection API. In fact, the data and business logic defined in the setup will be injected into the data and methods. setup() is the entry function of the combination API, which can directly define variables and methods (data and business logic) in it, and return and expose them
in the form of objects -
Skill:
- The js file function corresponding to setup is logically separated. The more fragmented the better, it is convenient for multiple components to be reused instead of one file serving one component.
- In the setup, multiple APIs (JS logic functions) can be injected into the component, and life cycle functions can also be written in the function ( compared to VUE2 ), and they can be injected into the component (return)
-
-
Two properties of the DOM object
- property
is the basic property in the DOM object, and custom properties will not be added to it - attribute
attributes is a subset of property, which saves custom attributes on HTML tags in addition to default attributes - The data binding between attribute and property is one-way, attribute->property; that is, the property with the same name will be updated when the attribute is updated. When the property is updated, the attribute will not change any
value on the property and attribute synchronously, and the update will be reflected in In the HTML page;
- property
-
How does VUE set environment variables? Third-party interpretation
of environment variables on the official website
-
v-bind=“$props“
Send the declared props at once -
VUE features: componentization, virtual dom, data-driven, one-way data flow state management
-
In VUE, v-for is executed prior to v-if, and the data should be processed in the calculated attribute, and v-if should be used less
-
Why does v-for in VUE need to use key:
没有key时，Vue更新视图会删除全部DOM元素后全部重新渲染。
有key值后通过算法比对，已存在的不需要重新操作以节约性能。
并且key最好是元素的唯一ID，不能是数组的index。因为数组有可能在任意地方添加元素而不一定再数组末尾，从而导致数组index起不到唯一标识的目的，vue依然会全部重新渲染。
- The value of this is determined when the function is executed, and this is the executor.
The this inside the arrow function is lexical scope, determined by the context.
setTimeout(function () {
console.log('this in init: ', this);
}, 1000); //window 异步队列中直接执行，执行者this是window
setTimeout( () => {
console.log('this in init: ', this);
}, 1000); //与上一级作用域的this指向相同
- Closure:
When a function is defined, it is bundled with references to its surrounding state (data).
A simple understanding is a function that can read internal variables of other functions
function f1(){
var n=999;
nAdd=function(){
n+=1}
function f2(){
//f2函数，就是闭包。
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000 函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除
Make it possible for external access to the internal variables of the function;
local variables will be resident in memory;