- preface
- 1,setup
- 2. ref create responsive data
- 3. Create reactive data
- 4. Calculated calculation attribute
- 5. watch monitoring
- 6. watchEffect listening callback
- 7. Life cycle
- 8. toRef create ref
- 9. toRefs response conversion
- 10. shallowReactive responsive outer layer conversion
- 11. shallowRef basic data response
- 12. The readonly response becomes read-only
- 13. The shallowReadonly response becomes read-only
- 14. toRaw response becomes non response
- 15. The markRaw flag is never responsive
- 16. customRef depends on update control
- 17. Provide & inject communication
- 18. Judgment of responsive data
- 19. Report mobile dom component
- 20. Suspend asynchronous rendering component
- 21. Global API adjustment
- 22. Remove api
- 23. Ref get DOM
- 24. emits custom event
- 25, $nextTick asynchronous update
- 26. hook life cycle events
preface
These contents are recorded by the blogger during the learning process. Some unimportant points are skipped. If necessary, query the documents by yourself. In fact, the learning cost from V2 to V3 is not high. If you are familiar with V2, you can start V3 after reading this article.
Online source code compilation address
1,setup
Setup is the container of all composition APIs, and the value is a function. The data, methods, etc. used in the component should be configured in the setup, which will be executed once before beforeCreate. Note: in V3, this is no longer pointing to Vue instances, and accessing this will be undefined
1.1, return value
- If an object is returned, the properties and methods in the object can be used directly in the template.
- If you return a rendering function: you can customize the rendering content.
1.2 points for attention
Try not to mix with V2 configuration
Properties and methods in setup can be accessed in V2 configuration (data, methods, computed...).
However, the V2 configuration (data, methods, computed...) cannot be accessed in setup.
If there are duplicate names, setup takes precedence.
setup cannot be an async function
Because the return value is no longer the return object, but Promise, the template cannot see the attributes in the return object. (you can also return a Promise instance later, but you need the cooperation of suspend and asynchronous components)
1.3, syntax
<script> import { ref, reactive } from 'vue' export default { name: 'Home', setup(props, context) { const title = ref('title') const data = reactive({ value: 'Ha ha ha' }) return { title, data } } } </script>
1.4 parameters of setup
-
props: the value is an object, containing the attributes passed from outside the component and declared and received inside the component
-
Context: context object
- Attrs: the value is an object and contains attributes passed from outside the component but not declared in the props configuration, which is equivalent to this.$attrs
- Slots: received slot content, equivalent to this.$slots
- Emit: a function that distributes custom events, equivalent to this.$emit
2. ref create responsive data
Using ref, you can create a reference object (ref object for short) containing responsive data, which can be either a basic type or an object.
grammar
// establish const xxx = ref(value) // use xxx.value // In template <div>{{xxx}}</div>
3. Create reactive data
Define the responsive data of an object type. The internal Proxy implementation based on ES6 operates the internal data of the source object through the Proxy object
grammar
// establish const xxx = reactive({ xxx: '' }) // use xxx.xxx
4. Calculated calculation attribute
It is consistent with the function of computed configuration in V2
grammar
import { computed } from 'vue' setup(){ // Abbreviated grammar let fullName = computed(() => { return person.firstName + '-' + person.lastName }) // Complete grammar let fullName = computed({ get(){ return person.firstName + '-' + person.lastName }, set(value){ const nameArr = value.split('-') person.firstName = nameArr[0] person.lastName = nameArr[1] } }) return fullName }
5. watch monitoring
It is consistent with the watch configuration function in V2, and the syntax is slightly changed
grammar
- Scenario 1: monitor the responsive data defined by ref
watch(sum, (newValue, oldValue) => { console.log('sum Changed', newValue, oldValue) }, {immediate:true})
- Scenario 2: monitor the responsive data defined by multiple ref s
watch([sum, msg], (newValue,oldValue) => { console.log('sum or msg Changed', newValue,oldValue) })
- Scenario 3: monitor reactive defined responsive data
// If the watch monitors reactive defined responsive data, the oldValue cannot be obtained correctly // If the watch monitors responsive data defined by reactive, the deep monitoring is forced on watch(person, (newValue, oldValue) => { console.log('person Changed', newValue, oldValue) }, { immediate:true, deep:false }) // The deep configuration here no longer works
- Scenario 4: monitor an attribute in the responsive data defined by reactive
watch(() => person.job, (newValue, oldValue) => { console.log('person of job Changed', newValue, oldValue) }, { immediate:true, deep:true })
- Scenario 5: monitor some attributes in the reactive data defined by reactive
watch([() => person.job, () => person.name], (newValue, oldValue) => { console.log('person of job Changed', newValue, oldValue) }, { immediate:true, deep:true })
- Special case: the deep configuration is valid because it monitors an attribute in the object defined by the reactive element
watch(() => person.job, (newValue, oldValue) => { console.log('person of job Changed', newValue, oldValue) }, { deep:true })
6. watchEffect listening callback
The difference between watch and watch is that watch should indicate both the monitored properties and the monitored callbacks. The watchEffect does not specify which attribute to monitor or which attribute to use in the monitored callback, so it monitors which attribute and does not need to write the return value.
grammar
// As long as the data used in the callback changes, the callback will be directly re executed watchEffect(() => { const x1 = sum.value const x2 = person.age console.log('watchEffect The configured callback was executed') })
7. Life cycle
The lifecycle is all written in setup
7.1, change
- beforeDestroy renamed beforeUnmount
- destroyed renamed unmounted
- beforeCreate => setup
- created => setup
- beforeMount => onBeforeMount
- mounted => onMounted
- beforeUpdate => onBeforeUpdate
- updated => onUpdated
- beforeUnmount => onBeforeUnmount
- unmounted => onUnmounted
7.2 grammar
setup() { onMounted(() => { console.log('mounted') }) }
8. toRef create ref
Create a ref object whose value value points to an attribute in another object
grammar
const state = reactive({ foo: 1, bar: 2 }) const fooRef = toRef(state, 'foo') // Pass props export default { setup(props) { useSomeFeature(toRef(props, 'foo')) } }
9. toRefs response conversion
Convert a responsive object into a normal object, where each property of the result object is a ref pointing to the corresponding property of the original object
grammar
const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) // At this point, state and stateAsRefs are associated
10. shallowReactive responsive outer layer conversion
Only the response (shallow response) of the outermost attribute of the object is processed. Applicable to: an object data has a deep structure, but only the outer attributes change when it changes
grammar
const state = shallowReactive({ foo: 1, nested: { bar: 2 } })
11. shallowRef basic data response
Only basic data type responses are processed, and object responses are not processed. Applicable to: for an object data, subsequent functions will not modify the attributes in the object, but generate a new object to replace it
grammar
const shallow = shallowRef({ greet: 'Hello, world' })
12. The readonly response becomes read-only
Make a responsive data read-only (deep read-only) and apply it when you don't want the data to be modified
grammar
const shallow = shallowRef({ greet: 'Hello, world', // read-only nested: { bar: 2 // read-only } })
13. The shallowReadonly response becomes read-only
Make a responsive data read-only (shallow read-only) and apply it when you don't want the data to be modified
grammar
const shallow = shallowReadonly({ foo: 1, // read-only nested: { bar: 2 // Non read only } })
14. toRaw response becomes non response
Turn a reactive object generated by reactive into an ordinary object. All operations on this ordinary object will not cause page updates.
grammar
const foo = {} const Foo = reactive(foo) console.log(toRaw(Foo) === foo) // true
15. The markRaw flag is never responsive
Mark an object so that it will never become a responsive object again. Some values should not be set to responsive, such as complex third-party class libraries. When rendering a large list with immutable data sources, skipping responsive conversion can improve performance.
grammar
const foo = markRaw({}) console.log(isReactive(reactive(foo))) // false // It can also be used when nested in other responsive objects const bar = reactive({ foo }) console.log(isReactive(bar.foo)) // false
16. customRef depends on update control
Create a custom ref and explicitly control its dependency tracking and update triggers. It requires a factory function that takes the track and trigger functions as arguments and should return an object with get and set.
grammar
<script> import { customRef } from 'vue' export default { name: 'Home', setup() { // Implementation of anti shake function const fn = function(value, delay = 500) { let timeout return customRef((track, trigger) => { return { get() { track() return value }, set(newValue) { clearInterval(timeout) timeout = setTimeout(() => { console.log(newValue) value = newValue trigger() }, delay) } } }) } const keyword = fn('', 500) return { keyword } } } </script>
17. Provide & inject communication
To realize the communication between ancestor and descendant components, the parent component has a provide option to provide data, and the descendant component has an inject option to start using these data
grammar
// Ancestor component setup(){ let car = reactive({ name:'Benz', price:'40 ten thousand' }) provide('car', car) } // Descendant component setup(props, context){ const car = inject('car') return { car } }
18. Judgment of responsive data
18.1,isRef
Check whether a value is a ref object
grammar
const val = ref('xxx') isRef(val) // true
18.2,isReactive
Check whether a value is an isReactive object
grammar
const val = isReactive({}) isRef(val) // true
18.3,isReadonly
Check whether an object is a read-only proxy created by readonly
grammar
const state = reactive({ name: 'John' }) console.log(isReactive(state)) // true
18.4,isProxy
Check whether the object is a proxy created by reactive or readonly
grammar
const state = reactive({ name: 'John' }) console.log(isProxy(state)) // true
19. Report mobile dom component
Teleport provides a clean method that allows us to control which parent node in the DOM renders HTML without resorting to the global state or splitting it into two components.
grammar
<teleport to="Move position"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>I am a pop-up window</h3> <button @click="isShow = false">Close pop-up window</button> </div> </div> </teleport> // to format <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> // disabled format <teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </teleport>
20. Suspend asynchronous rendering component
When waiting for asynchronous components, render some additional content first to make the application have a better user experience
grammar
<template> <div class="app"> <h3>I am App assembly</h3> <Suspense> <template #default> <Child/> </template> <template #fallback> <h3>Loading.....</h3> </template> </Suspense> </div> </template> import { defineAsyncComponent } from 'vue' const Child = defineAsyncComponent(() => import('./components/Child.vue')) components: { Child }
21. Global API adjustment
Adjust the global API, Vue.xxx, to the application instance (app)
V2 api | V3 api |
---|---|
Vue.config.xxxx | app.config.xxxx |
Vue.component | app.component |
Vue.directive | app.directive |
Vue.mixin | app.mixin |
Vue.use | app.use |
Vue.prototype | app.config.globalProperties |
22. Remove api
name | present situation |
---|---|
Vue.config.productionTip | Removed |
config.keyCodes | Removed |
$children | Removed |
$listeners | Removed |
$on | Removed |
$off | Removed |
$once | Removed |
filters | Removed |
.native | Removed |
23. Ref get DOM
Since this does not exist in V3, the acquisition of ref is adjusted
23.1, single ref
grammar
<div ref="Qrcode" class="qr_codeode_url" /> import { ref } from 'vue' export default { setup() { const Qrcode = ref(null) // After mounting onMounted(() => { console.log(Qrcode.value) }) return { Qrcode } } }
23.2, ref in cycle
Binding ref on a for loop element in V3 will no longer automatically create a $ref array. To get multiple refs from a single binding, bind refs to a more flexible function
grammar
<div v-for="item in list" :ref="setItemRef"></div> import { onBeforeUpdate, onUpdated } from 'vue' export default { setup() { let itemRefs = [] const setItemRef = el => { if (el) { itemRefs.push(el) } } onBeforeUpdate(() => { itemRefs = [] }) onUpdated(() => { console.log(itemRefs) }) return { setItemRef } } }
- Itemref does not have to be an array: it can also be an object whose ref can be set through the iterative key
- If necessary, itemRef can also be responsive and can be listened on
24. emits custom event
Define events that a component can trigger to its parent component
// In subcomponents <h1 @click="father">{{ msg }}</h1> export default { name: 'HelloWorld', props: { msg: { type: String, default: '' } }, emits: ['close'], setup(props, { emit }) { const father = function() { emit('close', 'child') } return { father } } } // In parent component <HelloWorld :msg="msg" @click="fn" @close="fn2" />
25, $nextTick asynchronous update
Usage modification
import { nextTick } from 'vue' nextTick(() => { // ... })
26. hook life cycle events
Listen for critical phases in the component life cycle through events
grammar
// Syntax of V2 <template> <child-component @hook:updated="onUpdated"> </template> // Syntax of V3 <template> <child-component @vnode-updated="onUpdated"> </template> // Hump writing <template> <child-component @vnodeUpdated="onUpdated"> </template
If you find it helpful, I'm @ pengduoduo. Welcome to praise and pay attention to comments; END
PS: press F12 on this page, and enter document.querySelectorAll('.diggit')[0].click() in the console. What a surprise
official account
Previous articles
- Help you get started Vue3 family bucket Vue-Router4 tutorial
- VueX4 tutorial to help you get started with Vue3 family bucket
- Use nvm to manage node.js version and replace npm Taobao image source
- Super detailed! Vue router handle tutorial
- The. env file is used in vue to store global environment variables and configure vue startup and packaging commands
- Wechat applet realizes search keyword highlighting
- Super detailed! Vue's nine communication modes
- Super detailed! Vuex handle tutorial
Personal home page