Vue.js

# refs de Plantillas

Esta sección utiliza componentes de un solo archivo para ejemplos de códigos

Esta página asume que usted ya ha leído Introducción de la API de Composición y Fundamentos de la Reactividad. Léalos primero si usted es nuevo con la API de Composición.

Cuando se utiliza la API de Composición, los conceptos de refs reactivas y template refs son el mismo. Para obtener la referencia de un elemento en plantilla o una instancia de un componente, podemos declarar una ref como lo hacemos usualmente y retornarla desde setup().

<template>
  <div ref="root">Este es un elemento raíz</div>
</template>

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

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // El elemento del DOM será asignado a la ref luego de la renderización inicial
        console.log(root.value) // <div>Este es un elemento raíz</div>
      })

      return {
        root
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Aquí estamos exponiendo root en el contexto de render y vinculándolo al elemento div como su ref utilizando ref="root". En el algoritmo de patch del DOM Virtual, si la ref de un VNode corresponde a una ref en el context de render, el elemento correspondiente o instancia de componente de dicho VNode será asignado al valor de dicha ref. Esto se realiza durante el proceso de montaje o de patch del DOM Virtual, por lo cual refs de plantilla solo tendrán valores asignados luego de la renderización inicial.

Refs utilizadas como refs de plantilla se comportan igual que cualquieras otras refs: son reactivas y puede ser pasadas a (o retornadas de) funciones de composición.

# Uso con JSX

export default {
  setup() {
    const root = ref(null)

    return () =>
      h('div', {
        ref: root
      })

    // con JSX
    return () => <div ref={root} />
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# Uso dentro de v-for

Las refs de plantilla de la API de Composición no tienen un manejo especial cuando son utilizadas dentro de v-for. En su lugar, utilice refs de función para realizar un manejo manual:

<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>

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

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // make sure to reset the refs before each update
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Observar Refs de Plantilla

Observar una ref de plantilla para cambios puede ser una alternativa al uso de hooks de ciclo de vida demostradado en previos ejemplos.

Pero una diferencia clave a hooks de ciclo de vida es que los effects de watch() y watchEffect() son ejecutados antes de que el DOM se monte o se actualice, así que la ref de plantilla no haya sido actualizada cuando el observador ejecute el effect:

<template>
  <div ref="root">Este es un elemento raíz</div>
</template>

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

  export default {
    setup() {
      const root = ref(null)

      watchEffect(() => {
        // Este _effect_ ejecuta antes de que el DOM se actualice, en consecuencia,
        // la _ref_ de plantilla todavía no posee una referencia al elemento
        console.log(root.value) // => null
      })

      return {
        root
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Por lo tanto, los observadores que utilizan refs de plantilla deberían ser definidos con la opción flush: 'post'. Este va a ejecutar el effect después de que el DOM se haya actualizado y asegurar que la ref de plantilla quede sincronizado con el DOM y se refiera al elemento correcto.

<template>
  <div ref="root">Este es un elemento raíz</div>
</template>

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

  export default {
    setup() {
      const root = ref(null)

      watchEffect(() => {
        console.log(root.value) // => <div>Este es un elemento raíz</div>
      }, 
      {
        flush: 'post'
      })

      return {
        root
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

← Mixins →