vue3 对象属性赋值, view层不更新

Question

<template>
  <h1>{{ obj }}</h1>
</template>

<script setup>
import { onMounted, reactive } from 'vue'

let obj = reactive({ old: 0 })

const changeObj = () => {
  obj = {
    new: 1
  }
}

onMounted(() => {
  changeObj()
  console.log(obj);
})
</script>

view视图层

Answer 1

解决方案1:
将reactive改为ref, 为正常

<template>
  <h1>{{ obj }}</h1>
</template>

<script setup>
import { onMounted, ref } from 'vue'

let obj = ref({ old: 0 })

const changeObj = () => {
  obj.value = {
    new: 1
  }
}

onMounted(() => {
  changeObj()
  console.log(obj.value)
})
</script>

解决方案2:
外层包裹state

<template>
  <h1>{{ state.obj }}</h1>
</template>

<script setup>
import { onMounted, reactive, watchEffect } from "vue";

let state = reactive({
  obj: {old: 0}
})

const changeObj = () => {
  state.obj = {
    new: 1
  }
}

watchEffect(() => {
  console.log(state.obj)
})
onMounted(() => {
  changeObj()
})
</script>