vue3 给reactive声明的对象重新赋值导致输入框不能输入，并给出代码示例

下面是一个示例，演示了当给 `reactive` 声明的对象重新赋值时，输入框不能输入的问题：

<template>
  <div>
    <input v-model="obj.text">
    <button @click="changeObj">Change Object</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const obj = reactive({
      text: 'Hello World'
    })

    const changeObj = () => {
      obj = reactive({ text: 'New Text' }) // 这里重新赋值了 obj，导致输入框不能输入
    }

    return {
      obj,
      changeObj
    }
  }
}
</script>

在上面的代码中，我们在 `changeObj` 函数中重新给 `obj` 赋值了一个新的 `reactive` 对象，这会导致 `obj` 不再是原来的响应式对象，因此导致输入框不能输入。

为了解决这个问题，我们可以使用 `set` 函数来更新 `obj` 的属性值，示例代码如下：

<template>
  <div>
    <input v-model="obj.text">
    <button @click="changeObj">Change Object</button>
  </div>
</template>

<script>
import { reactive, set } from 'vue'

export default {
  setup() {
    const obj = reactive({
      text: 'Hello World'
    })

    const changeObj = () => {
      set(obj, 'text', 'New Text') // 使用 set 函数更新 obj 的属性值
    }

    return {
      obj,
      changeObj
    }
  }
}
</script>

在上面的代码中，我们使用 `set` 函数来更新 `obj` 的 `text` 属性值，这样不会破坏 Vue 的响应式系统，输入框就可以正常输入了。