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

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

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

1、ref

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

2、computed

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

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

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

3、reactive

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

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

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

上述代碼在運(yùn)行時(shí)會(huì)報(bào)錯(cuò)，data數(shù)據(jù)類型會(huì)出錯(cuò)，這是因?yàn)閮?nèi)部的computed函數(shù)造成的data類型推論循環(huán)，需要解決。可以手動(dòng)設(shè)置一個(gè)數(shù)據(jù)類型賦給data。

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

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

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

4、toRefs

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

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

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