vue3中toRef和toRefs的情況（系列九）

 ref和toRef區別:
      ref->復制, 修改響應式數據不會影響原始數據
      toRef->引用, 修改響應式數據會影響原始數據
      ref->數據發生改變, 界面就會自動更新
      toRef->數據發生改變, 界面也不會自動更新

      toRef應用場景:
      如果想讓響應式數據和以前的數據關聯起來, 並且更新響應式數據之后還不想更新UI, 那么就可以使用toRef

  1.toRef
  創建一個ref類型數據, 並和以前的數據關聯
  2.toRefs 批量創建ref類型數據, 並和以前數據關聯 3.toRef和ref區別
  ref-創建出來的數據和以前無關(復制)
  toRef-創建出來的數據和以前的有關(引用)
  ref-數據變化會自動更新界面
  toRef-數據變化不會自動更新界面

 

ref類型數據代碼

<template>
  <div>
      <p>{{state}}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>

  import {ref} from 'vue';
export default {
  name: 'App',
  setup() {
      let obj = {name:'lnj'};
 
      let state = ref(obj.name);
 

      function myFn() {
          state.value = 'zs';
          console.log(obj); //{name:'lnj'}
          console.log(state); // {name:'zs'}
      }
    return {state, myFn}
  }
}
</script>

<style>

</style>

通過發現，如果利用ref將某一個對象中的屬性變成響應式的數據，

我們修改響應式的數據是不會影響到原始數據的obj !== state， 會觸發頁面更新

 

通過toRef

<template>
  <div>
      <p>{{state}}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>
  /*
  1.toRef
  創建一個ref類型數據, 並和以前的數據關聯
  2.toRefs
  批量創建ref類型數據, 並和以前數據關聯
  3.toRef和ref區別
  ref-創建出來的數據和以前無關(復制)
  toRef-創建出來的數據和以前的有關(引用)
  ref-數據變化會自動更新界面
  toRef-數據變化不會自動更新界面
  * */
  import {ref, toRef} from 'vue';
export default {
  name: 'App',
  setup() {
      let obj = {name:'lnj'};
      /*
      ref(obj.name) -> ref(lnj)
      -> reactive({value:lnj})
      * */
      // ref->復制
      // let state = ref(obj.name);
      // toRef->引用
      /*
      ref和toRef區別:
      ref->復制, 修改響應式數據不會影響以前的數據
      toRef->引用, 修改響應式數據會影響以前的數據
      ref->數據發生改變, 界面就會自動更新
      toRef->數據發生改變, 界面也不會自動更新

      toRef應用場景:
      如果想讓響應式數據和以前的數據關聯起來, 並且更新響應式數據之后還不想更新UI, 那么就可以使用toRef
      * */ let state = toRef(obj, 'name'); 

      function myFn() {
          state.value = 'zs';
          /*
          結論: 如果利用ref將某一個對象中的屬性變成響應式的數據
               我們修改響應式的數據是不會影響到原始數據的obj !== state
          * */
          /*
          結論: 如果利用toRef將某一個對象中的屬性變成響應式的數據
               我們修改響應式的數據是會影響到原始數據的
               但是如果響應式的數據是通過toRef創建的, 那么修改了數據並不會觸發UI界面的更新
          * */
          console.log(obj);  //{name:'zs'}
          console.log(state);  //{name:'zs'}
      }
    return {state, myFn}
  }
}
</script>

<style>

</style>

 

toRefs

<template>
  <div>
      <p>{{state}}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>
  /*
  1.toRef
  創建一個ref類型數據, 並和以前的數據關聯
  2.toRefs
  批量創建ref類型數據, 並和以前數據關聯
  3.toRef和ref區別
  ref-創建出來的數據和以前無關(復制)
  toRef-創建出來的數據和以前的有關(引用)
  ref-數據變化會自動更新界面
  toRef-數據變化不會自動更新界面
  * */
  import {ref, toRef, toRefs} from 'vue';
export default {
  name: 'App',
  setup() {
      let obj = {name:'lnj', age:18};
      // let name = toRef(obj, 'name');
      // let age = toRef(obj, 'age');
      let state = toRefs(obj);

      function myFn() {
          // name.value = 'zs';
          // age.value = 666;
          state.name.value = 'zs'; state.age.value = 666;
          console.log(obj); //{name:'zs', age:666}
          console.log(state);  //{name:'zs', age:666}
          // console.log(name); 
          // console.log(age);
      }
    return {state, myFn}
  }
}
</script>

<style>

</style>