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