API compuesta de Vue3

Prefacio

A medida que aumenta la complejidad empresarial de los componentes tradicionales, la cantidad de código seguirá aumentando y toda la lógica del código será difícil de leer y comprender. Donde Vue3 usa la API compuesta es en la configuración. En una configuración, podemos agrupar partes de código por aspectos lógicos, luego extraer partes de lógica y compartir el código con otros componentes. Por tanto, la API de composición nos permite escribir código más organizado.

 1. Componente de configuración

import { ref } from 'vue';
export default {
    setup(){
        const name = ref('Composition Api');
        const showName = () => console.log(`Hello${name.value}`);
        const status = ref(false);
        const toggle = () => status.value = true;
        onMounted(() => {
            showName();
        });
        return { name,status, toggle};
    },
};
//setup() 函数在组件创建 created() 之前执行。
//setup() 函数接收两个参数 props 和 context。
//第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。
//第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

Nota: Debe evitar utilizar esto en la configuración, ya que no encontrará la instancia del componente. La llamada a la configuración ocurre antes de que se analicen la propiedad de datos, la propiedad calculada o los métodos, por lo que no se pueden obtener en la configuración.

<template>
    <div>
        <p>计数器实例: {
   
   { count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

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

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时，我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
</script>

En Vue 3.0, podemos hacer que cualquier variable reactiva funcione en cualquier lugar a través de una nueva función de referencia, como se muestra a continuación:

import { ref } from 'vue'

let count = ref(0);

La función ref () puede crear un objeto de datos receptivo basado en un valor dado. El valor de retorno es un objeto y contiene solo un atributo .value.

Dentro de la función setup(), los datos responsivos creados por ref() devuelven un objeto , por lo que es necesario  acceder a él mediante .value  .

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

2. Gancho de ciclo de vida de API combinado de Vue

En Vue2, implementamos funciones de enlace del ciclo de vida de las siguientes maneras:

export default {
  beforeMount() {
    console.log('V2 beforeMount!')
  },
  mounted() {
    console.log('V2 mounted!')
  }
};

Para implementar funciones de enlace de ciclo de vida en la API de composición de Vue3, puede   usar la función con el prefijo on en la función setup() :

import { onBeforeMount, onMounted } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {
      console.log('V3 beforeMount!');
    })
    onMounted(() => {
      console.log('V3 mounted!');
    })
  }
};

La siguiente tabla es la asignación entre la API de opciones y la API de composición, incluido cómo llamar a los enlaces del ciclo de vida dentro de la configuración ():

API basada en opciones de Vue2	API de composición de Vue
antes de crear	configuración()
creado	configuración()
antes del montaje	enAntesMontar
montado	montado
antes de actualizar	enAntes deActualizar
actualizado	en Actualizado
antes de destruir	enAntes de desmontar
destruido	en Desmontado
errorCapturado	onErrorCaptured

Debido a que la configuración opera alrededor de los enlaces de ciclo de vida beforeCreate y creado , no es necesario definirlos explícitamente. En otras palabras, cualquier código escrito en estos enlaces debe escribirse directamente en la función de configuración.

Estas funciones aceptan una función de devolución de llamada que se ejecutará cuando el componente llame al gancho:

setup() {
...
    // 组件被挂载时，我们用 onMounted 钩子记录一些消息
    onMounted(() => console.log('component mounted!'));
...
}

3. Referencia de plantilla

Cuando se utiliza la API de composición, los conceptos de referencias reactivas y referencias de plantilla se unifican.

Para obtener una referencia a un elemento o instancia de componente dentro de una plantilla, podemos declarar una referencia y devolverla desde setup() como de costumbre:

<template>
  <div ref="root">This is a root element</div>
</template>

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

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

      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  }
</script>

En el ejemplo anterior, exponemos la raíz en el contexto de representación y la vinculamos al div como su referencia mediante ref="root".

Las referencias utilizadas como plantillas se comportan como cualquier otra referencia: son reactivas y pueden pasarse (o devolverse) a funciones compuestas.

3.1 Uso en v-for

Las referencias de plantillas de API compuestas no tienen un tratamiento especial cuando v-for las usa internamente. En su lugar, utilice referencias de funciones para realizar un procesamiento personalizado:

<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([])

      // 确保在每次更新之前重置ref
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>

3.2 Escuchar referencias de plantillas

Escuchar los cambios en las referencias de las plantillas puede reemplazar los enlaces del ciclo de vida demostrados en el ejemplo anterior.

Pero una diferencia clave con los ganchos del ciclo de vida es que watch() y watchEffect() tienen efectos secundarios cuando se ejecutan antes de que se monte o actualice el DOM, por lo que cuando se ejecuta el oyente, la referencia de la plantilla aún no se ha actualizado.

<template>
  <div ref="root">This is a root element</div>
</template>

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

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

      watchEffect(() => {
        // 这个副作用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。
        console.log(root.value) // => null
      })

      return {
        root
      }
    }
  }
</script>

Por lo tanto, los oyentes que usan referencias de plantilla deben definirse con la opción flush: 'post', que ejecutará el efecto secundario después de que se actualice el DOM, asegurando que la referencia de la plantilla esté sincronizada con el DOM y haga referencia al elemento correcto.

<template>
  <div ref="root">This is a root element</div>
</template>

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

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

      watchEffect(() => {
        console.log(root.value) // => <div>This is a root element</div>
      },
      {
        flush: 'post'
      })

      return {
        root
      }
    }
  }
</script>