Examples to explain how to use the customRef function in Vue

How to use the customRef function in Vue? The following article will show you how to use the customRef function in VueJs. I hope it will be helpful to you!

ref is the componsition API officially provided by Vue, which converts non-responsive data into Responsive data functions, as for how the bottom layer implements data collection and responsiveness

Users don’t need to pay attention, it is equivalent to a hardcover computer. However, sometimes, for some complex and special needs, we need to make our own wheels , implement the internal structure manually and natively.

While realizing the basic functions, additional expansion is also required. Then you need to customize ref at this time. It is equivalent to an assembled computer, and the internal structure needs to be customized by yourself. To assemble and implement.

Rather than buying it directly from the mall, use some ready-made parts to assemble a hardcover-like computer, and it can even be expanded. When realizing a customized and complex functional requirement, this customization ref is very useful. [Related recommendations: vuejs video tutorial, web front-end development]

Example-delayed display

Want to use input To achieve real-time collection and real-time display of a data, you need to use the v-model command

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
 import { ref } from "vue";
 let keyword = ref("itclanCoder"); // Vue官方提供的ref函数,返回一个响应式数据
</script>

. Now you cannot use the officially provided ref function, that is, you have to use it yourself. Top a function similar to ref, as shown below

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from &#39;vue&#39;;      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log(&#39;get&#39;,`${value}`);
            track(); // 追踪一下数据的改变,通知vue最终value数据的变化,提前和get沟通一下,让value是有作用的
            return value
        },
        set(newValue) { // 设置数据,新的值,修改数据
           value = newValue;
           trigger(); // customRef函数内接收两个参数,一个是track,另一个就是trigger,通知vue去重新解析模板
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定义一个ref
</script>

The collection and display of custom data can be achieved through the above method. If you want to wait a few seconds before triggering, then just It is enough to add a timer in set, and the others remain unchanged

set(newValue) {
    setTimeout(() => {
        value = newValue;
        trigger(); // 通知vue去重新解析模板
    },500)
}

Solve the problem of continuous echo, false triggering, and the problem of the timer being always enabled

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from &#39;vue&#39;;      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  let timer;  // 开启一个定时器  
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log(&#39;get&#39;,`${value}`);
            track(); // 追踪一下数据的改变,通知vue最终value数据的变化,提前和get沟通一下,让value是有作用的
            return value
        },
        set(newValue) { // 设置数据,新的值,修改数据
           clearInterval(timer);  // 先清除定时器,在开
           timer = setTimeout(() => {
              value = newValue;
              trigger(); // customRef函数内接收两个参数,一个是track,另一个就是trigger,通知vue去重新解析模板
           },500)
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定义一个ref
</script>

What is more difficult to understand about this customRef is that it needs to be returned in the custom ref function. At the same time, it receives a factory function as a parameter. This factory function accepts track and trigger are two functions

as parameters and return an object with get and set methods

Generally speaking, track()Call before the return value in the get() method, track the data changes, and notify vue of the final data changes, and the trigger() function Then you should call notification

vue

at the end of the set() function to re-parse the template and update the page data

The last step is to realize how long to wait The time will be displayed later. Use a timer to implement it to solve the problem of frequent false triggers. The conventional solution is to clear the timer first and then turn on the timer

Summary

Customization The ref(customRef()) function is a very useful thing. It is equivalent to an expansion of a function of ref. You can implement it manually. The internal implementation is rather convoluted and you need to do it yourself. Experience and practice

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Examples to explain how to use the customRef function in Vue. For more information, please follow other related articles on the PHP Chinese website!