vue3.0 customRef

(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数
(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象

使用:
	import {customRef} from 'vue';
	
	
    function useDebouncedRef(value) {
	      return customRef((track, trigger) => {
	        return {
	          get() {
	            track()
	            return value
	          },
	          set(newValue) {
	            value2=newValue
	            trigger()
	          },
	        }
	      })
	 }
	
	通过customRef返回的ref对象,和正常ref对象一样,通过x.value修改或读取值

代码示例:

<template>
  <div>

    <button @click="inc" ref='btn'>Clicked {{ count }} times.</button>
    
    <p>ref:{{text(num).value}}</p>


  </div>

</template>
<script>
import { ref,customRef} from 'vue'
const ThemeSymbol = Symbol()



export default {

  setup() {
    let num=ref(0);


  
    const inc = () => {
       num.value++;
      
    }

   

    function useDebouncedRef(value) {

      return customRef((track, trigger) => {
        return {
          get() {
            
            track()
            return value
          },
          set(newValue) {
            value2=newValue
            trigger()
           
          },
        }
      })
    }

    onMounted(()=>{
     
    })

    return {
      text: useDebouncedRef,
      num
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>