Vue3的其他属性和API函数

customRef() 自定义Ref函数实现Ref()的相关功能

 

 

<script>
import { ref customRef} from 'vue'

    function myRef(value){
        return customRef((track,trigger)=>{
                 return {
                   get(){
                   track() // 告诉Vue这个数据是需要追踪变化的
                   return value  
                   }
                   set(newValue){
                    value = newValue;
                    trigger(); // 告诉Vue触发界面更新
                   }  
         }
  })


}

  setup(){

    let age = myRef(18);
    function myFn(){
         age.value +=1;
    }
    return {age,myFn}
}
</script>    
通过customRef() 实现自定义ref()的功能。

由于setup函数只能够是同步的，因此在setup函数中获取数据需要逐步回调。

export default {
  name:'App',
  setup(){
    let  state = ref([]);
    fetch('../public/data.json')
    .then((res)=>{
      return res.json()
    })
    .then((data)=>{
      state.value = data;
    })
    .catch((err)=>{
      console.log(err);
    })
    return {state};
  }
}

因此通过自定义ref() 可以实现获取数据的代码分离更好维护的目的。

 

 

export default {
  name:'App',
  // 自定义ref 获取数据
  myRef(value){
    
    fetch(value)
    .then((res)=>{
      return res.json()
    })
    .then((data)=>{
      state.value = data;
      trigger() // 获取成功更新UI界面
    })
    .catch((err)=>{
      console.log(err);
    })

    return customRef((track,trigger)=>{
      return {
        get(){
          track();
          return value;
        },
        ste(newValue){
          value = newValue
          trigger()
          return value
        }
      }
    })
  },
  setup(){
    let  state = this.myRef('../public/data.json');
    return {state};
  }
}

提取界面的DOM元素：

 

 

 

 

 

 在setup函数中调用生命周期函数，就可以获取通过ref获取界面中DOM结点元素的值。