vue3.0加上Typescript

vue3.0加上Typescript

1、使用npm或者yarn进行vue项目的搭建

//创建项目
vue create test
cd test
//下载依赖
npm install axios
//或者
yarn add axios
//启动项目
npm run serve
//或者
yarn serve
//项目打包
npm run build
//或者
yarn build

创建好项目之后，使用vue3.0的特性进行项目构建，vue3.0中引入了一个setup()函数进行统一管理vue的data、method、以及声明周期函数。对基本数据要使用ref使之变成可以在模板中使用的数据，但是当我们的数据过多的时候，使用ref函数进行声明数据显得臃肿，这个时候我们可以使用reactive()函数进行数据的同意管理，其实就是相当于是vue2.0中data()函数，我们需要使用toRefs将data数据转化为ref类型的数据，这样就进行了同意的管理，但是在reactive()函数中定义的数据将会变成一个响应式的数据。因为我们使用的是Typescript，所以我们应该使用类型注解，让我们的代码更加严谨规范。

import Vue, {
    ref, reactive, toRefs } from "vue";
interface DataProps {
   
  girl: string[];
  select: string;
  selectPerson: (index: number) => void;
}
export default {
   
  name: "about",
  setup() {
   
    //使用类型注解 更加严谨
    const data: DataProps = reactive({
   
      girl: ["迪丽热巴", "cabbage", "谢大脚"],
      select: "",
      selectPerson: (index: number) => {
   
        data.select = data.girl[index];
      },
    });
    return {
   
      ...toRefs(data),
    };
  },
};

2、vue2.0声明周期

钩子函数

1、setup函数

在beforecreated created之前被调用 开始创建之前进行调用

以下钩子函数在setup函数中进行使用

2、onBeforeMount

在组件挂载之前进行调用

3、onMounted

组件挂载到页面之后进行调用