Explicación detallada de la función setup ref reactive toRefs en vue3.0

El uso de funciones de uso común de vue3

• setup El uso de funciones puede reemplazar los atributos de datos y métodos en Vue2 y agregar lógica directamente a la configuración

• ref Las variables utilizadas por la función en temlate deben estar envueltas en ref

• La matriz y el método devueltos solo se pueden usar en la plantilla

  setup() {
    
    
    const girls = ref(["小红", "小英", "晓红"]);
    const selectGirl = ref("");
    const selectGirlFun = (index) => {
    
    
      selectGirl.value = girls.value[index];
    };
    return {
    
    
      girls,
      selectGirl,
      selectGirlFun,
    };
  },

• reactiveEl uso de la función, su parámetro no es un tipo básico, sino un objeto, por lo que no necesita escribir en el método .valuey datapuede volver a colocarlo al mismo tiempo.

 setup() {
    
    
    const data = reactive({
    
    
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
    
    
        console.log(1111)
        data.selectGirl = data.girls[index];
      },
    });


    return {
    
    
      data
    };
  },

Pero para escribir de esta manera, debe templateagregarlo cuando use variables y métodos data.. Esto obviamente no se ajusta a los hábitos de codificación que desarrollamos.
Podemos pensar en deconstruir datos usando el ...operador de expansión al regresar , pero después de la deconstrucción, se convierte en Variables ordinarias, ya no tenemos la capacidad de responder,
por lo que necesitamos usar la función toRefs ()

• toRefsUso de funciones

setup() {
    
    
    const data = reactive({
    
    
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
    
    
        console.log(1111)
        data.selectGirl = data.girls[index];
      },
    });
    const refData = toRefs(data);

    return {
    
    
      ...refData,
    };
  }

Cómo elegir ref y reactivo, ambos métodos están bien, ambos pueden generar objetos sensibles, elección personalreactive