zoukankan      html  css  js  c++  java
  • vue3 中的自定义ref

    # 自定义ref 可以在响应式的逻辑过程中添加逻辑

    import { customRef } from '@vue/reactivity'
    export default {
      name: 'Demo',
      setup(){
        function myRef(value){
        return customRef((track,trigger)=>{
           return {
             get(){
                track()
                return value
             },
             set(newValue){
              setTimeout(()=>{
              value = newValue
              trigger()
              },500)
             }
           }
    
          })
        }
        let keyword = myRef('hello')
      return {
        keyword
      }
      }
    }
    

      # 防抖 ,可以通过每次开启定时器之前先清除之前的定时器

    <script>
    import { customRef } from '@vue/reactivity'
    export default {
      name: 'Demo',
      setup(){
        function myRef(value){
          let timer
        return customRef((track,trigger)=>{
           return {
             get(){
                track()  # 追踪数据
                return value
             },
             set(newValue){
               clearTimeout(timer)
              timer = setTimeout(()=>{
              value = newValue
              trigger()  # 重新解析模板
              },500)
             }
           }
    
          })
        }
        let keyword = myRef('hello')
      return {
        keyword
      }
      }
    }
  • 相关阅读:
    简易模拟点击自动化测试工具介绍
    HttpRunner 使用简介
    postman生成测试报告
    Java 多态
    Java 接口与接口的多继承关系
    Java 类实现接口
    Java 接口内容小结
    Java 接口
    Java 抽象
    Java 继承
  • 原文地址:https://www.cnblogs.com/ch2020/p/15668209.html
Copyright © 2011-2022 走看看