Uso onMounted + watchEffect para algunas renderizaciones costosas
ahora mismo, cada vez que la aplicación se monta, la función watchEffect también se ejecuta
¿Cómo puedo ejecutar una función solo cuando la aplicación se monta?
y evitar que watchEffect se ejecute automáticamente -> ejecutarlo solo después de que cambie el valor de los accesorios
// parent <template> <child :data="data" /> <button type="button" @click="changeData">click to change</button> </template> <script> import Child from "./components/child.vue"; export default { name: "App", components: { Child, }, data() { return { data: [1], }; }, methods: { changeData() { this.data = [1, 2]; }, }, }; </script> // Child <template> <h1>I have this prop</h1> </template> <script> import { onMounted, ref, watchEffect } from "@vue/runtime-core"; export default { name: "Child", props: ["data"], setup(props) { onMounted(() => { // do this watchEffect(() => { // if props.data data changes do this }); }); return {}; }, }; </script>No estoy seguro si entiendo bien su pregunta, debería ejecutarse cuando la aplicación se monta, pero tampoco cuando se monta. De todos modos, puede usar watchEffect directamente en el método de setup , ¿por qué anidarlo en onMounted ? Y si solo quiere escuchar los cambios de los accesorios, use solo watch en su lugar. watchEffect lo ejecuta una vez cuando está montado y luego cuando se cambia cualquiera de los accesorios o referencias usados.
<template> <h1>I have this prop</h1> </template> <script> import { onMounted, watch, watchEffect } from "@vue/runtime-core"; export default { name: "Child", props: ["data"], setup(props) { onMounted(() => { // do stuff once }); watchEffect(() => { // if mounted or if props.data data changes do this }); watch( () => props.data, (data, prevData) => { // if props.data data changes do this } ); return {}; }, }; </script>Una sugerencia más agregada a la respuesta de Thomas es usar watchEffect con la opción de flush como post
Esto asegurará que todas sus referencias también se resuelvan.
https://v3.vuejs.org/guide/reactive-computed-watchers.html#effect-flush-timing
<template> <h1>I have this prop</h1> </template> <script> import { watchEffect, watchPostEffect } from "@vue/runtime-core"; export default { name: "Child", props: ["data"], setup(props) { watchEffect(() => { // if mounted or if props.data data changes do this }, { flush: 'post' }); // Vue 3.2+ watchPostEffect(() => { // if mounted or if props.data data changes do this }); return {}; }, }; </script>