customRef() 自定義Ref函式實現Ref()的相關功能

 1 <script>
 2 import { ref customRef} from 'vue'
 3 
 4     function myRef(value){
 5         return customRef((track,trigger)=>{
 6                  return {
 7                    get(){
 8                    track() // 告訴Vue這個資料是需要追蹤變化的
 9                    return
 
 value  
10                    }
11                    set(newValue){
12                     value = newValue;
13                     trigger(); // 告訴Vue觸發介面更新
14                    }  
15          }
16   })
17 
18 
19 }
20 
21   setup(){
22 
23     let age = myRef(18);
24     function myFn(){
25          age.value +=1;
 
26     }
27     return {age,myFn}
28 }
29 </script>    
30 通過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結點元素的值。