This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021
If you feel helpful, please click 👍 to encourage you
Readonly and shallowReadonly
- Readonly: The read-only agent is deep: any nested properties are also read-only.
- ShallowReadonly: shallow read-only data. Its own attributes are read-only. Nested data is not read-only proxy
- Application scenario: In some cases, we may not want to update the data, so we can generate a read-only proxy object to read the data without modifying or deleting it
setup() {
const state = reactive({
a: 1,
b: {
c: 2,
},
});
const rState1 = readonly(state)
const rState2 = shallowReadonly(state);
const update = () => {
// rState1.a++ // error
// rState1.b.c++ // error
// rState2.a++ // error
rState2.b.c++;
};
return { state, update };
},
Copy the code
ToRaw and markRaw
- ToRaw: Converts a proxy object to a normal object and returns the normal object
- MarkRaw: Marks an object so that it will never be converted to a proxy. Return the object itself, skipping proxy conversion to improve performance.
setup() { const state = reactive<any>({ name: 'tom', age: 25, }); const testToRaw = () => { const user = toRaw(state); user.age++; // The interface will not update}; const testMarkRaw = () => { const likes = ['a', 'b']; state.likes = markRaw(likes); State. likes[0] += '--123'; state.age++; }; return { state, testToRaw, testMarkRaw, }; },Copy the code
toRef
- Create a REF object for an attribute on a source responsive object that internally operates on the same data value and is updated synchronously
- Ref: A new data value is copied and operated separately. The update does not affect each other
- Application: toRef is useful when passing a prop ref to a composite function
setup() { const state = reactive({ age: 5, money: 1000, }); Const age = toRef(state, 'age'); const age = toRef(state, 'age'); Const money = ref(state.money); // Const money = ref(state.money); const update = () => { // state.age++; age.value++; // money.value++; }; return { age,update,state, money }; } </script>Copy the code
customRef
- CustomRef is used to custom return a REF object that can explicitly control dependency tracing and trigger responses, accepting factory functions
- The two parameters are track for tracking and trigger for triggering the response, and return objects with get and set attributes
- Example: Implement a shake – proof function
<script lang='ts'> import { customRef, defineComponent, ref } from 'vue'; /** * @description: @return {*} */ function useDebounceRef<T>(value: T, deley = 200) {// Prepare a variable to store the timer ID let timeoutId: number; Return customRef((track, trigger) => {return {get() {// tell vue to track data (); return value; }, // Set the data set(newValue: T) {// Clear timer clearTimeout(timeoutId); TimeoutId = setTimeout(() => {value = newValue; // Tell vue to update the interface trigger(); }, deley); }}; }); } export default defineComponent({ name: '', setup() { // const keyword = ref('abc'); const keyword = useDebounceRef('abc', 500); return { keyword, }; }}); </script>Copy the code
Dojo.provide and inject
- Realize communication between components (grandparent and grandchild) across hierarchies
The parent component
<template> <h1> Parent component </h1> <p> Current color: {{color}} < / p > < button @ click = "" color = 'red' > red < / button > < button @ click =" "color = 'yellow'" > yellow < / button > < button @click="color='blue'"> blue </button> <hr> <Son /> </template> <script lang="ts"> import {provide, ref } from 'vue' import Son from './Son.vue' export default { name: 'ProvideInject', components: { Son }, setup() { const color = ref('red') provide('color', color) return { color } } } </script>Copy the code
Child components
<template> <div> < H2 > child component </h2> < HR > <GrandSon /> </div> </template> <script lang="ts"> import GrandSon from './GrandSon.vue' export default { components: { GrandSon }, } </script>Copy the code
The grandson components
<template> <h3 :style="{color}"> {{color}}</h3> </template> <script lang="ts"> import { inject } from 'vue' export default { setup() { const color = inject('color') return { color } } } </script>Copy the code