vue3 对子组件使用 v-model，关于绑定对象的问题

这里有最基本的使用，vue3官网 组件 v-model

我来讲讲注意事项， 如果你 v-model 的是个 reactive 创建的对象，那么将不起作用，必须得是 ref 创建的对象

要知道，v-model：

<input v-model="searchText" />

<!-- 等价于 -->
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

问题来了，当你的searchText是一个对象的时候，ref 可以直接修改，而 reactive 不能直接修改，比如：

let a = ref({ a: 22 });
a.value = { a: 33 };// a 仍然是响应式

let b = reactive({ a: 22 });
b = { a: 33 };// b 不再是响应式

所以 reactive 只能修改其属性，而不能修改其本身。使用了v-model后，将不会响应
ref 如同它的英文一样，它是引用的、参考的，修改其引用的对象后，还能保持响应！