Vue.js 3：当 `data()` 转换为 `setup()` 时，`v-model` 失去反应性

Question

考虑这个基本示例，其中我们有一个input和 ap显示输入的值：

const App = {
  data() {
    return {
      message: "hello world!"
    };
  }
};


Vue.createApp(App).mount('#root');

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

当您更改输入文本时，它会反映在p. 但是，如果您替换data()为setup()，则对 的更改input不再反映在p：

const App = {
  setup() {
    return {
      message: "hello world!"
    };
  }
};


Vue.createApp(App).mount('#root');

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

一个简单的解决方法是ref在message：

const App = {
  setup() {
    const message = Vue.ref("hello world!");
    return {
      message
    };
  }
};


Vue.createApp(App).mount('#root');

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

但是为什么我们必须这样做呢？为什么它不能开箱即用？

我认为这可能是因为从data()内部返回的对象是反应性的，但从返回的对象setup()不是因为该对象可能不仅包含数据，还包含不需要观察的方法，但是当我检查时inputEl.__vueParentComponent.setupState我看到它是一个Proxy. 那么，为什么它不起作用？

Answer 1

return {...}只是将该值暴露给设置函数的外部，您应该始终使用reforreactive使您的数据具有反应性：

setup() {
    const message = Vue.ref("hello world!");
    return {
      message
    };
  }

你可以在这里看到评论说// expose to template：

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

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

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // expose to template
      return {
        count,
        object
      }
    }
  }
</script>

并根据模板的设置用法：

如果setup返回一个对象，则可以在组件的模板中访问该对象的属性，以及props传入的属性setup

结论

函数中返回的对象与选项 api 中属性setup返回的对象不同data