vue3的ref,computed,reactive和toRefs你都了解嗎

更新時間：2022年03月21日 15:37:10 作者：不另外加糖

這篇文章主要為大家詳細介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、ref

本質(zhì)為一個函數(shù)，輸入?yún)?shù)為一個值（原始類型），返回響應式的對象

2、computed

本質(zhì)為一個函數(shù)，輸入?yún)?shù)是一個函數(shù)，可以將我們需要的值作為輸入函數(shù)的返回值

例子：實現(xiàn)點擊按鈕，屏幕上的數(shù)加1

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <!-- ref對象在模板中引用時，vue可以直接把內(nèi)部的值展示出來，不需要寫count.value -->
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <button @click='increase'>點擊</button>
  </div>
</template>
<script lang='ts'>
//ref API:是一個函數(shù)，輸入?yún)?shù)為一個值，返回一個響應式對象
//computed API：是一個函數(shù)，輸入?yún)?shù)為函數(shù)類型，該輸入函數(shù)中包含咱們需要的值
//reactive:將響應式變量包裹在一起，更加清晰
import {computed, ref,reactive} from 'vue'
export default({
  name: 'App', 
  /*data(){
    return{
      count: 0
    }
  },
  methods:{
    increase(){
      this.count++
    }
  }*/
  // 注意：在vue3中不使用data和methods，可以使用ref函數(shù)，完成響應式
  setup(){
    const count = ref(0)    //將0傳入，返回一個對象
    const double = computed(()=>{
      return count.value*2
    })
    const increase = ()=>{
      count.value++         //通過返回對象的value屬性獲得響應式的數(shù)據(jù)
    }
    return{                 //要在外面使用的變量都要先通過return導出，才能使用
      count,
      increase,
      double
    }
  }
});
</script>

3、reactive

本質(zhì)為一個函數(shù)，接受一個object作為傳入?yún)?shù)

上述代碼在setup函數(shù)中，有很多響應式數(shù)據(jù)，它們都是分散的，我們可以使用reactive將它們都包裹起來。輸出對象類型，模板中需要用data.屬性取出來。

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <h1>{{data.count}}</h1>
    <h1>{{data.double}}</h1>
    <button @click='data.increase'>點擊</button>
  </div>
</template>
<script lang='ts'>
import {computed, ref,reactive} from 'vue'
export default({
  name: 'App', 
  // 注意：在vue3中不使用data和methods，可以使用ref函數(shù)，完成響應式
  setup(){
    const data = reactive({
      count:0,
      increase:()=>{
        data.count++
      },
      double:computed(()=>
        data.count*2
      )
    })
    return{                 //要在外面使用的變量都要先通過return導出，才能使用
      data
    }
  }
});
</script>

上述代碼在運行時會報錯，data數(shù)據(jù)類型會出錯，這是因為內(nèi)部的computed函數(shù)造成的data類型推論循環(huán)，需要解決。可以手動設置一個數(shù)據(jù)類型賦給data。

interface dataProps{
  count:number,
  double:number,
  increase:()=>void
}

繼續(xù)修改上述代碼，發(fā)現(xiàn)模板中每次使用數(shù)據(jù)都需要data.屬性才能取出來，能不能直接用屬性？這時我們想到了es6的...展開符，但是更改后發(fā)現(xiàn)點擊按鈕，屏幕上的數(shù)字不發(fā)生變化了，數(shù)據(jù)不是響應式的了。

這是因為這種方式返回的數(shù)據(jù)都是普通的js數(shù)據(jù)類型，并不是響應式的ref數(shù)據(jù)類型，因此我們需要新的方法。

4、toRefs

本質(zhì)為一個函數(shù)，接受一個reactive函數(shù)作為輸入?yún)?shù)，返回一個ref類型的對象。

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <!-- ref對象在模板中引用時，vue可以直接把內(nèi)部的值展示出來，不需要寫count.value -->
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <button @click='increase'>點擊</button>
  </div>
</template>
const refData = toRefs(data)
return{                 //要在外面使用的變量都要先通過return導出，才能使用
  ...refData
}

這時，我們展開refData，就能實現(xiàn)響應式了。