Vue3中ref和reactive的基本使用及區(qū)別詳析

更新時間：2022年07月15日 14:32:15 作者：北海的大魚

這篇文章主要給大家介紹了關于Vue3中ref和reactive的基本使用及區(qū)別的相關資料,需要的朋友可以參考下

前言

今天給大家講一下在vue3中ref和reactive的使用方法，以及他們的使用區(qū)別在哪里，下面通過一個簡單的計數(shù)器的例子來給大家進行說明

ref—計數(shù)器案例

ref 主要用于基本類型的響應，看如下代碼：

import { ref } from 'vue' // 導入ref
interface DataProps {
  count: number;
  double: number;
  increase: () => void
}
export default {
  name: 'App',
  setup() {
    const count = ref(0)
    const double = computed(() => {
      return count.value*2
    })
    const increase = () => {
      count.value++
    }
    
    return {
      count,
      double,
      increase
    }
  }
}

在setup方法通過ref實現(xiàn)響應式對象，最后要在return中進行返回。

我們發(fā)現(xiàn)幾個變量都分散在各處，那么有沒有什么辦法可以將他們包裹在對象里呢？那就來看看下面的reactive

reactive—計數(shù)器案例

reactive：主要用于引用類型的響應。里面屬性拿出來單獨使用，可能會喪失響應性

代碼如下（示例）：

import { reactive, toRefs } from 'vue'
interface DataProps {
  count: number;
  double: number;
  increase: () => void
}
export default {
  name: 'App',
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => { data.count++ },
      double: computed(() => data.count * 2)
    })
    const refData = toRefs(data)
    refData.double
    return {
      ...refData
    }
  }
}

定義一個data對象，在里面定義參數(shù)

在return中我們需要讓變量保持響應式，那么就需要使用toRefs，就可以將普通的類型變?yōu)閞ef響應式類型

PS：在return里面使用…refData（前面加三點），那么在使用的時候就可以直接使用變量名，例如：< h1> {{count}} < /h1>

區(qū)別

通過上面的例子，大家應該對ref和reactive有了一些了解，下面通過標準的 js 來進行類比，幫助大家更好的理解區(qū)別：

類似使用ref

先定義x，y為0，當使用函數(shù)時，再更新x和y的值

let x = 0
let y = 0

function updataNumber() {
?? ?x = 2
?? ?y = 3?
}

類似使用 reactive

在pos中有兩個key都為0，在函數(shù)中更新兩個值pos.x = 2.

x,y必須和對象在一起才能引用，如果像第三種const { x } = pos，先取出來，再進行更新，x還是舊的值，并且會喪失響應式

const pos = {
?? ?x: 0,
?? ?y: 0,
}

function updata?? ?Object() {
?? ?pos.x = 2
?? ?pos.y = 3?
}

const { x } = pos
pos.x = 3

附：ref和reative的使用心得

一般來說，vue定義響應式變量有兩種寫法:

1）寫法1：reative聲明所有變量，最后return的時候一起toRefs

一種是把reative當做vue2的data，所有變量用reative一次性生成，最后一起toRefs（這個注意不要漏）。優(yōu)點是賦值不用寫.value

 <template>
  <h2>name: {{state.name}}</h2>
  <h2>age: {{state.age}}</h2>
  <h2>wife: {{state.wife}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>
 
<script>
/* 
reactive: 
    作用: 定義多個數(shù)據(jù)的響應式
    const proxy = reactive(obj): 接收一個普通對象然后返回該普通對象的響應式代理器對象
    響應式轉換是“深層的”：會影響對象內部所有嵌套的屬性
    內部基于 ES6 的 Proxy 實現(xiàn)，通過代理對象操作源對象內部數(shù)據(jù)都是響應式的
*/
import {
  reactive,toRefs
} from 'vue'
export default {
  setup () {
    /* 
    定義響應式數(shù)據(jù)對象
    */
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      },
    })
    console.log(state, state.wife)
 
    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }
 
    return {
      ...toRefs(state)
    }
  }
}
</script>

2）寫法2：從頭到尾都用ref聲明變量，賦值的時候要注意加.value

第二種，從頭到尾都用ref，除了賦值時要.value很麻煩，其他倒沒什么。

<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>
 
<script>
import {
  ref
} from 'vue'
export default {
 
  setup () {
 
    // 定義響應式數(shù)據(jù) ref對象
    const count = ref(1)
    console.log(count)
 
    // 更新響應式數(shù)據(jù)的函數(shù)
    function update () {
      // alert('update')
      count.value = count.value + 1
    }
 
    return {
      count,
      update
    }
  }
}
</script>