This is the 27th day of my participation in the More Text Challenge. For more details, see more text Challenge

First, the throttling application of customRef

CustomRef is used to customize a ref that can display the control dependency trace and trigger response, accepts a factory function with two arguments, a track for the trace and a triger for the trigger response, and returns an object with the get and set properties. In real development, the anti-shaking function can be implemented.

1.1 First, create a new debounce. Ts file in the hook folder

import { customRef } from 'vue'

export function useDebounced<T> (value: T, delay = 300, callback: Function) {
    let timer: any = null
    return customRef((track, trigger) = > {
        return {
            get() {
                track() // Tell vue to track the data
                return value
            },
            set(newValue: T) {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() = > {
                    value = newValue
                    callback(newValue)
                    trigger() // Tell vue to update the view}, delay); }}})}Copy the code

1.2 Then demonstrate with the input input box in customeref.vue

<template>
  <div>
      <input type="text" v-model="keyword">
  </div>
</template>

<script lang="ts">
import {useDebounced} from '.. /hooks/debounce'
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'customRef'.setup() {
      // Initial value 500 delay 500 delay callback method
      let keyword = useDebounced<string>(' '.500.(v:string) = >{
          // We can write the request interface logic after getting v
          console.log(v,'Throttled data');  
      })

      return {
          keyword
      }
  }
});
</script>

<style scoped>

</style>
Copy the code

2. Provide communicates with Inject

Provide and Inject can easily achieve cross-layer communication between components. Provide returns data to be passed to children in the parent component, and Inject data to children components such as children or grandchildren that need to use the data.

2.1 Create a provide page to provide message messages

<template>
  <div>
    <injectComponent></injectComponent>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide } from "vue";
import injectComponent from ".. /components/inject.vue";

export default defineComponent({
  name: "".setup() {
    provide("message"."Hello");
  },
  components: {
    injectComponent,
  },
});
</script>

<style scoped>
</style>
Copy the code

2.2 Create a Inject component to receive messages

<template>
  <div>{{MSG}} {inject}</div>
</template>

<script lang="ts">
import { defineComponent,inject } from 'vue';

export default defineComponent({
  name: ' '.setup(){
    let msg = inject('message')
    console.log(msg);
    return {
        msg
    }
  }
});
</script>

<style scoped>

</style>
Copy the code

Effect:

2.3 We see grandson components used

<template>
  <div>{{MSG}}</div>
</template>

<script lang="ts">
import { defineComponent,inject } from 'vue';

export default defineComponent({
  name: ' '.setup(){
    let msg = inject('message')
    console.log(msg);
    return {
        msg
    }
  }
});
</script>

<style scoped>

</style><div> {{MSG}} <div> </p><grandson></grandson>
  </div>
Copy the code

3. Judgment of responsive data

If you want to test whether a data in response to a data type, can pass isRef, isReactive, isReadonly, isProxy to judge

<template>
  <div>
      <p>isResponse</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, isRef, ref, isReactive,reactive,isReadonly,readonly,isProxy} from 'vue';

export default defineComponent({
  name: ' '.setup() {
      console.log(isRef(ref(' ')),'Determine if the response is ref');
      console.log(isReactive(reactive({})),"Reactive or not");
      console.log(isReadonly(readonly({})),'Determine if readonly is read-only');
      console.log(isProxy(readonly({})),'Judge proxy');      
      console.log(isProxy(ref(' ')),'Judge proxy');  // Ref is not a proxy}});</script>

<style scoped>

</style>
Copy the code