Vue 3 Composition API：使用 props 作为组件数据的初始值

Question

因此，我正在使用 API 组合在 Vue 3 中构建一个搜索页面。我有一个组件，它从父级获取一组数据并显示数据片段，包括关键字所在的位置，因此它需要制作此数据的工作副本以生成可显示的值。

我有很多奇怪的错误，因为我最初使用以下代码，认为它只会获取值：

setup(props) {

          const displayEntry = ref(props.entry)

...

但这最终变成了被动反应并改变了原始数据。我不需要反应性，因为我是从父级动态创建组件的。我也不想在父级中保留数据的工作副本，因为这会增加代码的复杂性。然后我尝试了无数种不同的解决方案来尝试打破反应性，直到我变得简单：

displayEntry.value = props.entry

此时我的短绒发疯了...

error    Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity  vue/no-setup-props-destructure

那么从 prop 获取值的正确方法是什么？

Answer 1

原来我以某种方式在父级中传递了一个引用。以下是我的代码：

setup(props) {
  watchEffect(() => {
      if (searchTerm.value == "") {
        filteredEntries.value = []
      } else {
        filteredEntries.value = entries.value.filter(searchFilter)
      }
    })

  return {
      searchTerm, filteredEntries, echo, showPreview
    }
}

并且在模板中：

<SearchPreview
    v-for="( entry, index ) in filteredEntries"
    :key="index"
    :entry="entry"
    :search-term="searchTerm"
  />

不知道为什么它会传递 ref，我不确定如何传递值，但我使用以下 hack 将其修复在组件中：

const displayEntry = ref(JSON.parse(JSON.stringify(props.entry)))

（这会留下一些未定义的嵌套属性，但我单独传递它们以使其工作）

Answer 2

在您展示的代码示例中，您从未将 fileredEntries 初始化为 ref。您如何在那里分配任何值？如果您在组件上使用数据字段，那么您应该将其移至设置函数。不要混合组合和选项 api，它们不能很好地协同工作。

您还使用了 (for ... in) 循环来遍历过滤后的条目。对于数组，您应该使用 (for ... of) 循环。（参见）

这是一个没有任何修改的示例。

<template>
  <div>
    <SearchPreview
      v-for="( entry, index ) of filteredEntries"
      :key="index"
      :entry="entry"
      :search-term="searchTerm"
    />
  </div>
</template>
<script>

const MyComponent = defineComponent({
setup(props) {
  const entries = ref(['John', 'Jane']);
  const searchTerm = ref('');
  const filteredEntries = ref([]);
  const searchFilter = (item) => {
    // do some filtering
  };

  watchEffect(() => {
      if (searchTerm.value == "") {
        filteredEntries.value = []
      } else {
        filteredEntries.value = entries.value.filter(searchFilter)
      }
    });

  return {
      searchTerm, filteredEntries
    };
  }
})

Vue 3 Composition API：使用 props 作为组件数据的初始值

Vue 3 Composition API: using props as initial value for component data

javascript

vue.js

vue-component

vuejs3

vue-composition-api