vue3.0中setup ref reactive toRefs 函数详解

vue3常用函数的使用

• setup 函数用法,可以代替Vue2中的data和method属性,直接把逻辑加在setup中

• ref 函数在temlate中用的变量需要用ref包装下

• return出去的数组和方法在模板中才可以使用

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

• reactive函数的用法,他的参数不是基本类型,而是一个object,这样就你不用在方法中写.value了,同时放回data就可以

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


    return {
   
      data
    };
  },

但是这样写,必须在template使用变量和方法的时候需要加上data.,这样显然是不符合我们开发的编码习惯的,
我们可以想到在return的时候将data解构使用...拓展运算符,但是这样解构后就成了普通变量,不再具有响应式的能力,
所以我们需要使用toRefs()函数

• toRefs函数的用法

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,
    };
  }

如何选择ref和reactive,两种方法都可以,他们都可以生成响应式对象,个人选择reactive