Vue3中toRefs的使用

明月人倚樓發表於2021-06-16
Vue

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>

相關文章