重置 ref 中的嵌套属性未更新 v-model

Question

如何重置 ref 并更新指向我的 ref 中的子属性的 v-model？

我创建了这个 initState 对象并将其设置为 ref 对象

const initState = {
  text: {
    value: "",
    isDirty: false,
  },
};

const form = ref(initState);

然后我创建一个重置函数来重置 v-model 的值

const reset = () => {
  // doesn't work
  // form.value = initState;

  // work
  form.value = {
    text: {
      value: "",
      isDirty: false,
    },
  };
};

这是我的模板

<template>
  <form>
    <input v-model="form.text.value" placeholder="enter text..." />
    <button @click.prevent="reset">reset</button>
  </form>
  <div>{{ form.text.value }}</div>
</template>

这是我的演示代码 https://codesandbox.io/s/beautiful-morning-ymxq3v

如果我直接通过 initState 变量设置该引用，则不起作用 但如果我分配与 initState 相同的对象，它就会成功工作

const reset = () => {
  // doesn't work
  // form.value = initState;

  // work
  form.value = {
    text: {
      value: "",
      isDirty: false,
    },
  };
};

Answer 1

这是因为对象是引用类型，你可以测试一下

const reset = () => {
  console.log(form.value.text.value === initState.text.value )   
  //  always be true
};

所以更好的方法是使用函数来代替。

const initState = ()=> ({
  text: {
    value: "",
    isDirty: false,
  }
});
const form = ref(initState ())
const reset = () => {
  form.value = initState ()
};