vue3_ts-day02

vue3_ts-day02

昨天得代码看起来是不是有写冗杂，看起来结构也不是特别清晰，不利于咱们得书写，然后通过学习，看见了reactive函数，通过这个函数呢，可以让结构更为清晰

<script lang="ts">
import { reactive, toRefs } from 'vue';
interface DataProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}
export default {
  name: 'App',
  setup() {
    // const girls = ref(['大脚', '刘英', '小红']) //vue3ref语法
    // const selectGirl = ref('')
    // const selectGirlFun = (index: number) => {
    //   selectGirl.value = girls.value[index]
    // }
    //使用reactive来改造上面得数据，使之更加清晰，结构更具层次
    // 此时我们适合用reactive得话，那么就没有在使用ref了，同时，修改或者使用
    //数据得时候也不需要加.value了
    const data: DataProps = reactive({
      girls: ['大脚', '刘英', '小红'],
      selectGirl: '',
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    const refData = toRefs(data);
    return {
      // girls, //vue3语法 此时在这里return的话，将数据暴露出去意味着这个数据变成了全局可以使用的
      // selectGirl,
      // selectGirlFun,
      //data, //如果直接写data得话，我们在上面模板里面使用数据都要加一个data.得前缀，这样反而看来
      //并没有vue2方便，此时会不会想到将data展开，那么是不是直接可以使用
      //...data，发现并没有用处，此时就引入torefs
      ...refData, //此时得话，模板中可以直接使用data里面得数据
    };
  },
};
</script>

1. 同样的，我们先要引入reactive，要注意，此时我将默认引入的defineComponent删掉了，暂时不需要他，直接用类的写法暴露
2. 此时我们看到我直接把昨天的数据都定义在了data里面，然后用reactive函数去包裹着，然后直接return data。这个时候发现，模板中使用数据的时候，全都要加上data.的前缀，因为暴露出去的是一个data对象，此时感觉还没有vue2简洁，这个时候就引入了toRefs，
3. 上网查了一下，这个toRefs是将响应式对象变成普通对象的，以便于展开让模板使用的时候不必加上data.的前缀
   在暴露数据的时候，你可以这样：

const refData = toRefs(data);
    return {
      // girls, //vue3语法 此时在这里return的话，将数据暴露出去意味着这个数据变成了全局可以使用的
      // selectGirl,
      // selectGirlFun,
      //data, //如果直接写data得话，我们在上面模板里面使用数据都要加一个data.得前缀，这样反而看来
      //并没有vue2方便，此时会不会想到将data展开，那么是不是直接可以使用
      //...data，发现并没有用处，此时就引入torefs
      ...refData, //此时得话，模板中可以直接使用data里面得数据
    };

也可以这样：

return {
       ...toRefs(data)
    };

总之嘞，这样的话，在模板中使用的话，就可以不用加data.前缀了。
最后在提一嘴，reactive与ref两种方式，你觉得哪一个更好一点，我暂时觉得reactive会更好一点，但是，也是因为暂时学的比较浅，所以并没有觉得vue3相对于vue2来说好在哪里，也希望有人能够指点一下