主页 / coding / 问题 / 77166717
Accepted
Mathieu Dhondt
Asked: 2023-09-24 18:40:07 +0800 CST

在 Vue3 组合 API 中观看 prop 时，Watcher 仅被触发一次

  • 772

我有一个Search将 prop 传递query给子组件的父组件Results。

搜索.vue

<template>
  <div>
    <input v-model="query" type="text" />
    <Results :query="query" />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Results from "./Results.vue";
export default defineComponent({
  name: "Search",
  components: { Results },
  data() {
    return {
      query: "",
    };
  },
});
</script>

结果.vue

<template>
  <div>{{ query }} ( {{ query.length }})</div>
</template>

<script setup>
import { defineProps, watch, computed } from "vue";
const { query } = defineProps({
  query: {
    type: String,
    default: "",
  },
});

const queryLength = computed(() => query.length);

watch(
  () => query,
  () => {
    console.debug("Watcher was fired.");
  }, {immediate: true}
);

watch(queryLength, () => {
  console.debug("Watcher was fired.");
});

</script>

道具的观察者query永远不会触发，除非我添加{immediate: true}到观察者，但更新时它不会触发。当我添加基于 prop 的计算属性时，它也不会执行任何操作query。

奇怪的是，当显示queryprop 时，会渲染该值。

这是我的代码的最简单版本。我究竟做错了什么？

vuejs3

1 个回答

  1. Best Answer

    你不能像在中那样直接解构 props

    const { query } = defineProps({...})

    或者，准确地说，您可以这样做，但结果值不会是反应性的 -query将是一个简单的字符串。因此，该值将被渲染，但观察者（除其他外）将不起作用。

    为了避免该错误，要么根本不解构，要么使用toRefs()实用函数：

    const props = defineProps({...})
const { query } = toRefs(props);
// or for a single prop:
const query = toRef(props, 'query')
    • 1

相关问题