使用 ref() 与 reactive()。为什么这个例子像在 Vue 3 Composition 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 将值传递给 child。但这如期而至

let formData = ref({});

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

现在 formData 是反应式的，可以将其作为 prop 传递。仔细阅读文档，如果变量数据是 object 那么我应该没问题。我确实注意到，如果我在第一个示例中将 formData 移至全局范围，那么它将是反应性的。任何人都可以解释这种行为以及为什么我必须使用 ref() 来使我的示例工作吗？谢谢

Answer 1

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

const formData = reactive({})

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

  // Incorrect
  formData = data 
}

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

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

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

Using ref() vs reactive(). Why this example works as it does in Vue 3 Composition API?

vuejs3

vue-composition-api