使用 ref() 与 reactive()。为什么这个例子能像在 Vue 3 组合 API 中那样工作？

Question

我很好奇，在文档中找不到解释这种行为的地方

    <script setup>
    let formData = reactive({});
    
    // Method to be called when there is an emitterUIUpdate event emitted
    // from form-modal.vue @param(data) is the form data sent from the
    // form submission via the event bus. It is in the form of an object.
    // We will then send this data back
    // down to child display-scrap component via a prop.
    const updateUI = (data) => {
      console.log("emitter for updateUI");
      formData = data;
  
    };

这里的 formData 不是响应式的，并且不能通过 prop 向下传递值给子级。 但这按预期工作

let formData = ref({});

const updateUI = (data) => {
  console.log("emitter for updateUI");
  formData.value = data;
  console.log("App FormData is", formData.value);
};

现在 formData 是响应式的，并且可以将其作为道具传递。阅读文档，如果变量数据是一个对象，那么我应该没问题。我确实注意到如果我在第一个示例中将 formData 移动到全局范围，那么它将是被动的。谁能解释这种行为以及为什么我必须使用 ref() 来使我的示例工作？谢谢。

Answer 1

您最初尝试使用reactive 不起作用，因为您只是重新分配它。改变响应式对象的正确方法是重新分配其内部值。

const formData = reactive({})

const updateUI = (data) => {
  // Correct
  Object.assign(formData, data)

  // Incorrect
  formData = data 
}

定义 ref({}) 本质上是 { value: reactive({}) } 并且在您的情况下它有效，因为您正在重新分配 formData 内部值。

但是，如果您以与处理响应式相同的方式处理 ref，通过重新分配变量，结果将是相同的。