vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值的解決方法

更新時間：2025年04月03日 08:45:53 作者：南風(fēng)晚來晚相識

這篇文章主要介紹了vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值,本文通過實例圖文相結(jié)合給大家詳細講解,感興趣的朋友一起看看吧

<template>
  <div>
    <div>
      <h1>子組件</h1>
      <child :infoObj='infoObj' ref="childRef"></child>
    </div>
    <button @click='updateHandler'>跟新值</button>
    <div>
      <h1>父頁面</h1>
      <p>{{ infoObj }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import child from '@/components/child.vue'
import { ref,reactive } from 'vue'
let infoObj = reactive({
  name:'張三',
  age:26
})
const childRef = ref()
function updateHandler(){
  infoObj.name = '李四'
  infoObj.age = 28
  // 跟新值后，調(diào)用父組件的方法。
  childRef.value.getData()
}
</script>

<template>
  <div>
    <h1> {{ props.infoObj }}</h1>
  </div>
</template>
<script setup lang="ts">
let props = defineProps({
  infoObj:Object,
})
function getData(){
  console.log('infoObj', props.infoObj)
}
defineExpose({
  getData
})
</script>

使用ref父組件第二次傳遞給子組件的數(shù)據(jù)：不能獲取到最新的數(shù)據(jù)

<template>
  <div>
    <div>
      <h1>子組件</h1>
      <child :infoObj='infoObj' ref="childRef"></child>
    </div>
    <button @click='updateHandler'>跟新值</button>
    <div>
      <h1>父頁面</h1>
      <p>{{ infoObj }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import child from '@/components/child.vue'
import { ref } from 'vue'
let infoObj = ref({
  name:'張三',
  age:26
})
const childRef = ref()
function updateHandler(){
  infoObj.value = {
    name:'李四',
    age:28
  }
  // 跟新值后，調(diào)用父組件的方法?？聪耮etData是否可以獲取到最新的值
  childRef.value.getData()
}
</script>

<template>
  <div>
    <h1> {{ props.infoObj }}</h1>
  </div>
</template>
<script setup lang="ts">
let props = defineProps({
  infoObj:Object,
})
function getData(){
  console.log('infoObj', props.infoObj)
}
defineExpose({
  getData
})
</script>

辦法1:將數(shù)據(jù)作為函數(shù)的參數(shù)進行傳遞

<template>
  <div>
    <div>
      <h1>子組件</h1>
      <child :infoObj='infoObj' ref="childRef"></child>
    </div>
    <button @click='updateHandler'>跟新值</button>
    <div>
      <h1>父頁面</h1>
      <p>{{ infoObj }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import child from '@/components/child.vue'
import { ref } from 'vue'
let infoObj = ref({
  name:'張三',
  age:26
})
const childRef = ref()
function updateHandler(){
  infoObj.value = {
    name:'李四',
    age:28
  }
  // 將數(shù)據(jù)作為函數(shù)的參數(shù)進行傳遞
  childRef.value.getData(infoObj.value)
}
</script>

<template>
  <div>
    <h1> {{ props.infoObj }}</h1>
  </div>
</template>
<script setup lang="ts">
let props = defineProps({
  infoObj:Object,
})
function getData(mess:any){
  console.log('infoObj', props.infoObj)
  console.log('將數(shù)據(jù)作為函數(shù)的參數(shù)進行傳遞：mess', mess)
}
defineExpose({
  getData
})
</script>

解決辦法2:在調(diào)用方法時使用 nextTick

<template>
  <div>
    <div>
      <h1>子組件</h1>
      <child :infoObj='infoObj' ref="childRef"></child>
    </div>
    <div>
      <h1>父頁面</h1>
      <p>{{ infoObj }}</p>
    </div>
    <button @click='updateHandler'>跟新值</button>
  </div>
</template>
<script setup lang="ts">
import child from '@/components/child.vue'
import { nextTick, ref } from 'vue'
let infoObj = ref({
  name:'張三',
  age:26
})
const childRef = ref()
function updateHandler(){
  infoObj.value = { name: '李四', age: 28 };
  // 推薦在這里使用nextTick
  nextTick(() => {
    childRef.value.getData()
  })
}
</script>

<template>
  <div>
    <h1> {{ props.infoObj }}</h1>
  </div>
</template>
<script setup lang="ts">
let props = defineProps({
  infoObj:Object,
})
function getData(){
  // 或者在這里使用nextTick。
  console.log('getData 方法獲取值',  props.infoObj.name, props.infoObj.age)
}
defineExpose({
  getData
})
</script>

結(jié)論

使用ref父組件第二次傳遞給子組件的數(shù)據(jù)(基本數(shù)據(jù)和引用數(shù)據(jù)):不能獲取到最新的數(shù)據(jù)。

使用reactive和ref傳遞參數(shù)給子組件，為啥ref第二次子組件無法獲取最新的數(shù)據(jù)？而reactive可以

在 Vue 3 中，reactive 和 ref 在傳遞給子組件時的行為有所不同。這也說明了 reactive 和 ref 是有區(qū)別的(屁話)。

ref 和 reactive 的區(qū)別

1,ref可以試用于任何數(shù)據(jù)類型，而reactive只適用于對象類型。2,在js模塊ref獲取值,設(shè)置值,需要點value, ‌在模板中使用不需要點value。而reactive都不需要。3,ref可以完全替換整個對象，不會失去響應(yīng)式。reactive不能直接替換整個對象(否則會失去響應(yīng)式)。需要逐個修改屬性或使用 Object.assign4,返回值不同。ref返回一個‌包裝對象‌。reactive返回一個‌Proxy 對象‌

ref完全替換不會失去響應(yīng)式

<template>
  <button type="button" @click="updateHandler">更改數(shù)據(jù)</button>
  <p>數(shù)據(jù){{ objRef }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const objRef = ref({ age: 1 })
function updateHandler(){
  //完全替換 不會失去響應(yīng)式
  objRef.value = { age: 100 } 
}
</script>

reactive不能直接替換整個對象(會失去響應(yīng)式)

const objReactive = reactive({ a: 1 })
// 錯誤方式（失去響應(yīng)性）
objReactive = { b: 2 }
// 正確方式 或者逐個修改屬性
Object.assign(objReactive, { b: 2 })

[錯誤]:ref解構(gòu)不會失去響應(yīng)式。reactive解構(gòu)或展開會失去響應(yīng)式。[這句話不正確]

ref和reactive解構(gòu)都會失去響應(yīng)式。都需要通過toRefs 或者toRef 來進行解決。

reactive 解構(gòu)會失去響應(yīng)式

<template>
  <button type="button" @click="updateHandler">更改數(shù)據(jù)</button>
  <p>數(shù)據(jù){{ name }} {{  age}}</p>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({ name: '張三', age: 20 })
// reactive解構(gòu)會失去響應(yīng)式
let { name, age } = state
function updateHandler(){
  // 更新數(shù)據(jù)后，頁面不會跟新
  name = '王麻子'
  age = 1000
}
</script>

ref 解構(gòu)會失去響應(yīng)式

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 使用 ref 創(chuàng)建響應(yīng)式對象
const user = ref({
  name: 'Alice',
  age: 25
})
// 解構(gòu) ref 對象 - 會失去響應(yīng)式,視圖不會跟新
let { name, age } = user.value
function changeName() {
  name = 'Bob' // 直接修改解構(gòu)出來的屬性
}
</script>

toRefs()?解構(gòu)ref，解構(gòu)后仍然保持響應(yīng)式

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>
<script setup>
import { ref,toRefs } from 'vue'
// 使用 ref 創(chuàng)建響應(yīng)式對象
const user = ref({
  name: 'Alice',
  age: 25
})
// 通過toRefs解構(gòu)不會失去響應(yīng)式
let { name, age } = toRefs(user.value) 
function changeName() {
  name.value = '大大再大' // 直接修改解構(gòu)出來的屬性
}
</script>

toRef()?解構(gòu)reactive，解構(gòu)后仍然保持響應(yīng)式

<template>
  <button type="button" @click="updateHandler">更改數(shù)據(jù)</button>
  <p>數(shù)據(jù){{ name }} {{  age}}</p>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
const state = reactive({ name: '張三', age: 20 })
// 通過toRefs解構(gòu)不會失去響應(yīng)式
let { name, age } =  toRefs(state) 
function updateHandler(){
  // 更新數(shù)據(jù)后，頁面不會跟新
  name.value = '王麻子'
  age.value = 1000
}
</script>

toRefs()?

官網(wǎng):將一個響應(yīng)式對象轉(zhuǎn)換為一個普通對象。這個普通對象的[每個屬性]都是指向源對象[相應(yīng)屬性的] ref。每個單獨的 ref 都是使用 toRef() 創(chuàng)建的。我的理解：toRefs 可以把一個響應(yīng)式對象轉(zhuǎn)換為普通的對象。該普通對象的每一個值都是ref。由于變成了ref，所以我們使用每個屬性的時候需要點value。

ref和reactive的使用場景

ref 適合于基本數(shù)據(jù)類型，reactive適合于對象類型。ref 適合完全替換整個對象我喜歡用ref定義基本數(shù)據(jù)類型和數(shù)組。對象使用reactive。

ref的本質(zhì)

我理解的ref本質(zhì)上是reactive的再封裝。使用reactive定義響應(yīng)式數(shù)據(jù)時，若數(shù)據(jù)不是對象類型直接就返回了。就不會進行后續(xù)的數(shù)據(jù)響應(yīng)式處理了。這也就是我只用reactive定義對象型響應(yīng)式數(shù)據(jù)的原因

到此這篇關(guān)于vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值的文章就介紹到這了,更多相關(guān)vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: