Vue3中toRefs的使用

1 使用reactive 實作資料的響應式

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{state.name }} </p>
    <p>年齡:{{ state.age }} </p>
    <button @click="changeHander">改變内容</button>
  </div>
</template>
<script>
import {   reactive }  from "vue"
export default {
  name: "App",
  setup() {
   let  state=reactive({
     name:'李四',
     age:40
   })
   function changeHander(){
     state.name="李四222"
     state.age=80
   }
   return {state,changeHander}
  }
};
</script>
           

雖然上面可以使用資料的響應式。
但是有時屬性值很多，
可能有達到幾十個值。
這樣在視圖上一個個屬性點(.) 會很麻煩
可不可以不通過點也能夠正常的去渲染和自動更新視圖呢？
這個時候，機智的小夥伴們可能就想到到解構
那麼我們來嘗試一下。
           

2.使用解構

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年齡:{{ age }} </p>

    <button @click="changeHander">改變内容</button>
  </div>
</template>
<script>
import {   reactive }  from "vue"
export default {
  name: "App",
  setup() {
   let  state=reactive({
     name:'李四',
     age:40
   })
   function changeHander(){
     state.name="李四222"
     state.age=80
   }
    //  ...state雖然我們通過解構的方式。不要在視圖上進行點了。但是資料卻沒有響應
   return {...state,changeHander}
  }
};
</script>
           

我們發現使用解構視圖并沒有改變。
說明使用解構不行。
這個時候我們今天的主角toRefs就登場了
toRefs 可以把一個響應式對象轉換為普通的對象。
該普通對象的每一個值都是ref。
由于變成了ref，是以我們需要使用value。
趕緊往下看看
           

3. 初次使用toRefs

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年齡:{{ age }} </p>
    <button @click="changeHander">改變内容</button>
  </div>
</template>
<script>
import {   reactive, toRefs }  from "vue"
export default {
  name: "App",
  setup() {
    let  state=reactive({
        name:'李四',
        age:40
    })
    //  toRefs 可以把一個響應式對象轉換為普通的對象。
    //  該普通對象的每一個值都是ref
    // age: ObjectRefImpl {_object: Proxy, _key: "age", __v_isRef: true}
    // name: ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}
    let state2=toRefs(state);
    console.log( 'state2==>ref',state2 )
    function changeHander(){
        // 由于變成了ref，是以我們需要使用value
        state2.name.value="李四222"
        state2.age.value=80
    }
    //  ...state雖然我們通過解構的方式。不要在視圖上進行點了。但是資料卻沒有響應
    return {...state2,changeHander}
  }
};
</script>
           

4.優化一下，在toRefs的時候進行解構

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年齡:{{ age }} </p>

    <button @click="changeHander">改變内容</button>
  </div>
</template>
<script>
import {   reactive, toRefs }  from "vue"
export default {
  name: "App",
  setup() {
    let  state=reactive({
        name:'李四',
        age:40
    })
    // 這裡進行了一次解構
    let {name,age }=toRefs(state);
    function changeHander(){
        name.value="李四222"
        age.value=80
    }
    return {name,age,changeHander}
  }
};
</script>
           

5. toRefs 可以和 hook 進行搭配使用

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年齡:{{ age }} </p>
    <button @click="changeHander">改變内容</button>
    <h1>==========奧特曼資訊==========</h1>
    <p> 姓名：{{name1 }} </p>
    <p>年齡:{{ age1 }} </p>
  </div>
</template>
<script>
import {   reactive, toRefs }  from "vue"
export default {
  name: "App",
  setup() {
    let  state=reactive({
        name:'李四',
        age:40
    })
    // 這裡進行了一次解構
    let {name,age }=toRefs(state);
    // 這樣在視圖上就直接使用值了
    let {name1, age1}=useInfo();
    function changeHander(){
        name.value="李四222"
        age.value=80
    }
    return {name,age,changeHander, name1, age1}
  }
};

// 假設我定義的一個hook
function useInfo(){
  let sate=reactive({
    name1:"奧特曼",
    age1:1000
  })
   //這裡變成響應式并且解構
   return { ...toRefs(sate) }
}
</script>