Início / coding / Perguntas / 77166717
Accepted
Mathieu Dhondt
Asked: 2023-09-24 18:40:07 +0800 CST

O observador é acionado apenas uma vez ao observar o suporte na API de composição Vue3

  • 772

Eu tenho um componente pai Searchque passa a propriedade querypara um componente filho Results.

Pesquisa.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>

Resultados.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>

O observador do querysuporte nunca é acionado, exceto quando eu adiciono {immediate: true}ao observador, mas ele não é acionado nas atualizações. Também não faz nada quando adiciono uma propriedade computada com base na querypropriedade.

O estranho é que ao exibir a queryprop, o valor é renderizado.

Aqui está a versão mais simples do meu código . O que estou fazendo de errado?

vuejs3

1 respostas

  1. Best Answer

    Você não pode desestruturar props diretamente como faz em

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

    ou, para ser mais preciso, você pode fazer isso, mas os valores resultantes não serão reativos - queryserão uma string simples. Portanto, o valor será renderizado, mas os observadores (entre outras coisas) não funcionarão.

    Para evitar o erro, não desestruture ou use a função utilitária toRefs() :

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

relate perguntas