Vue3的其他属性和API函数

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结点元素的值。