Create a Vue3.0 project:
1. Use vue-cli to create
Check the @vue/cli version and make sure the @vue/cli version is above 4.5.0
vue --version or vue -V
Install or upgrade your @vue/cli
npm install -g @vue/cli
create
view create view_test
start up
cd view_test
npm run serve
2. Use vite to create
Official website: https:vitejs.cn
Create a project: npm i vite-app <project-name>
Enter the project directory: cd <project-name>
Installation dependencies: npm install
Run: npm run dev
setup
1. Understanding: A new configuration item in Vue3, the value is a function
2. setup is the "stage for performance" of all Composition APIs
3. The components used in the components: data, methods, etc., must be configured in the setup
4. Two return values of the setup function:
1) If an object is returned, the properties and methods in the object can be used directly in the template (focus!)
2) If a rendering function is returned, the rendering content can be defined (understand)
5, Note:
1) Try not to mix with VUE2 configuration
The properties and methods in the setup can be accessed in the vue2 configuration (data\methods\computed), but the setup cannot access the Vue2 configuration; if there is a duplicate name, the setup takes precedence
2) setup cannot be an async function, because the return value is no longer the return object, but a promise, and the template cannot see the properties in the return object
ref function
1. Function: define a responsive data
2. Syntax: const xx = ref(initValue)
Create a reference object (reference object) containing reactive data;
Operation data in js: xxx.value;
Read data in the template: no need for .value, directly
<div>{ {xxx}}<div>
Remarks: The received data can be: basic type, or object type; when receiving basic type data, the response is still completed by the get and set of Object.defineProperty(); object type data, internal "help" A new function in Vue3.0 --rective function
rective function
1. Function: Define an object type of responsive data (do not use it for basic types, use the ref function)
2. Syntax: const proxy object = rective (proxy object) receives an object (or array) and returns a proxy object (proxy object)
3. The responsive data defined by rective is "deep"; the internal proxy implementation based on ES6, the internal data of the source object is operated through the proxy object is responsive
Responsiveness of Vue2:
1. Implementation principle:
Object type: Intercept reading and modifying properties through Object.defineProperty() (data hijacking)
Array type: interception is achieved by rewriting a series of methods for updating the array (the method of changing the array is wrapped)
2. There are problems:
If you add or delete attributes, the interface will not be updated; if you modify the array directly through the subscript, the interface will not be updated
Responsiveness of Vue3:
Implementation principle:
1. Through Proxy (proxy): Intercept the change of any attribute in the object, including: reading and writing attribute values, adding attribute values, deleting attribute values, etc.
2. Through Reflect (reflection): operate on the properties of the proxy object
new Proxy(data,{
//Intercept read property value
get(target,prop){
return Reflect.get(target,prop)
},
//Intercept setting attribute values or adding attribute values
set(target,prop,value){
return Reflect.set(target,prop,value)
},
//Intercept delete attribute
deleteProperty(target,prop){
return Reflect.deleteProperty(target,prop)
}
})
reactive vs ref
1. Comparison from the perspective of defining data
ref is used to define basic data types;
reactive is used to define object (or array) type data;
Remarks: ref can also be used to define object (or array) type data, which will be automatically converted to a proxy object through reactive internally
2. From the perspective of principle comparison:
ref implements responsiveness (data hijacking) through the get and set of Object.defineProperty();
reactive implements responsiveness (data hijacking) by using Proxy, and manipulates the data inside the source object through Reflect
3. From the perspective of use:
For the data defined by ref, .value is required to operate the data, and .value is not required for direct reading in the template when reading data;
The data defined by ractive, the operation data and the read data do not need .value
Two points of attention for setup:
1. The timing of setup execution: execute once before beforeCreate, this is undefined
2. Setup parameters
props: the value is an object, including: the properties passed from outside the component and received by the internal declaration of the component
context: context object;
attrs: the value is an object, including: attributes passed from outside the component but not declared in the props configuration, equivalent to this.$attrs;
slots: received slot content, equivalent to this.$slots;
emit: A function that distributes custom events, equivalent to this.$emit
Computed properties and monitoring:
1. The computed function is consistent with the computed configuration function in vue2
2. watch function: consistent with the watch configuration function in vue2
Two pits:
1) When monitoring the responsive data defined by reactive: oldValue cannot be obtained correctly, and deep monitoring is forced to be turned on (deep configuration is invalid)
2) When monitoring a certain attribute in the responsive data defined by reactive: the deep configuration is valid
3. watchEffect function:
1) The routine of watch is: not only the attribute of monitoring, but also the callback of monitoring should be specified
2) The routine of watchEffect is: no need to specify which attribute to monitor, which attribute is used in the monitoring callback, then which attribute to monitor
3) watchEffect is a bit like Computed: but computed pays attention to the calculated value (the return value of the callback function), so the return value must be written; while watchEffect pays more attention to the process (the function body of the callback function), so there is no need to write the return value
watchEffect(()=>{
const x1 = sum.value
const x2 = person.age
console.log('The callback configured by watchEffect is executed')
})
Lifecycle hooks:
1. Vue3 can use the life cycle hook of vue2, but there are two renamed:
beforeDestroy was renamed to beforeUnmount;
destroyed changed its name to unmounted
2. Vue3 also provides a life cycle hook in the form of Composition API, which corresponds to the hook in vue2 as follows:
beforeCreate ===>setup()
created ===> setup()
beforeMount ===> onBeforeMount
mounted === > onMounted
beforeUpdate === > onBeforeUpdate
updated ===> onUpdated
beforeUnmount ===> onBeforeUnmount
unmounted ===> onUnmounted
Custom hook function
1. What is a hook: it is essentially a function that encapsulates the Composition API used in the setup function; similar to mixin in vue2
2. Advantages of custom hooks: reuse code to make the logic in setup clearer and easier to understand
toRef
1. Function: Create a ref object whose value points to an attribute value in another object
2. Grammar: const name = toRef(person,'name')
3. Application: When a property in the responsive object is to be provided for external use alone
4. Extension: toRefs has the same function as toRef, but multiple ref objects can be created in batches. Syntax: toRefs(person)
shallowReactive与shallowRef
1. shallowReactive: Responsive (shallow responsive) that only deals with the outermost properties of the object
2. shallowRef: only handles the responsive type of basic data types, and does not perform responsive processing of objects
3. When to use: If there is an object data, the structure is relatively deep, but only the outer attribute changes when it changes ===>shallowReactive
If there is an object data, the subsequent function will not modify the properties in the object, but generate a new object to replace ===>shallowRef
readonly与shallowReadonly
readonly: Make a responsive data read-only (deep read-only)
shallowReaonly: Make a responsive data read-only (shallow read-only)
Application scenario: when the data is not expected to be modified
toRaw and markRaw
toRaw: Convert a responsive object generated by reactive into a normal object; used to read the normal object corresponding to the responsive object, all operations on this common object will not cause page updates
markRaw: Marks an object so that it will never become a responsive object again;
Application scenario: Some values should not be set as responsive, such as complex third-party class libraries, etc.; when rendering large lists with immutable data sources, skipping responsive conversion can improve performance
customRef:
Create a custom ref with explicit control over its dependency tracking and update triggers (often used for function stabilization)
provide and inject:
To achieve communication between grandparents and grandchildren, the parent component has a provide option to improve data, and the child component has an inject option to start using the data
Judgment of responsive data:
1. isRef: Checks whether a value is a ref object
2. isReactive: Checks whether an object is a responsive proxy created by reactive
3. isReadonly: Checks whether an object is a read-only proxy created by readonly
4. isProxy checks whether an object is a proxy created by a reactive or readonly method
Advantages of the Composition API:
In the traditional Options API, if you add or modify a requirement, you need to modify it in data, methods, and computed respectively; but in the composition API, we can organize our code and functions more elegantly, so that the agents of related functions are more orderly organized together
new components
1、Fragment:
In vue2, the component must have a root tag. In vue3, the component can have no root tag, and multiple tags will be included in a Fragment virtual element internally; benefits: reduce tag levels and reduce memory usage
2、Teleport:
is a technique capable of moving our component html structure to a specified location
3、subspense:
Render some extra content while waiting for asynchronous components, so that the application has a better user experience
Other comparisons between vue2 and vue3:
1. The vue3 global API is adjusted: namely: Vue.xxx is adjusted to the application instance app
| 2.x Global API (Vue) |
3.x instance API (app) |
| Vue.config.xxx |
app.config.xxx |
| Vue.config.productionTip |
remove |
| Vue.component |
app.component |
| Directive.view |
app.directive |
| Vue.mixin |
app.mixin |
| Vue.use |
app.use |
| Vue.prototype |
app.config.globalProperties |
2. The data option should always be declared as a function
3. Change of transition class name
4. Remove keyCode as a v-on modifier, and no longer support config.keyCodes
5. Remove the v-on.native modifier
6. Remove the filter