vue3响应式丢失的情况

vue3响应式丢失的情况

start

• 本文主要是记录一下，在vue3中数据丢失的情况。

1. reactive 声明的数据直接修改引用

代码

<template>
  <div>
    <div>a {{ a.name }}</div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
let a = reactive({ name: "我是a", })

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: '异步返回的数据1' })
    }, 1000)
  })
}

const test = async () => {
  const response = await fetchData()
  a = response
  console.log(JSON.stringify(a))
}

test()
</script>

<style></style>

运行截图

如何规避？

1. 使用  Object.assign
// a = response
Object.assign(a, response)

2. 在数据外层包裹一层对象，修改属性值的形式去修改
let a = reactive({
  data: { name: "我是a", }
})
a.data = response


3. 使用 ref 声明数据

2. 对 reactive 声明的数据解构

代码

<template>
  <div>
    <div>a {{ a.name }}</div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
let a = reactive({ name: "我是a", })

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: '异步返回的数据1' })
    }, 1000)
  })
}

const test = async () => {
  const response = await fetchData()
  let { name } = a
  name = response.name
  console.log(JSON.stringify(a), name)
}

test()
</script>

<style></style>

运行截图

如何规避？

1. 使用ref

3. 对深层次的 reactive 声明的数据解构

代码

<template>
  <div>
    <div>a {{ data.a }}</div>
    <div>a {{ data.aa.name }}</div>
    <div>a {{ data.aaa.name.name }}</div>

  </div>
</template>

<script setup>
import { reactive } from 'vue'
let data = reactive({
  a: 1,
  aa: { name: 2 },
  aaa: { name: { name: 3 } }
})

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: '异步返回的数据1' })
    }, 1000)
  })
}

const test = async () => {
  const response = await fetchData()
  let { a, aa, aaa } = data
  a = 11
  aa.name = 22
  aaa.name.name = 33

  console.log(JSON.stringify(data))
}

test()
</script>

运行截图

end

• 目前了解下来，整体就是对 reactive 声明的数据需要多加注意。
• 更多的考虑是 基础类型数据和引用类型数据，切换了复制，基础类型的数据的响应式会在特定时间丢失。