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

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

4、onBeforeUpdate

在组件更新之前进行调用

5、onUpdated

组件更新之后进行调用

6、onBeforeUnmount

在组件卸载之前调用

7、onunmounted

在组件销毁之后调用

8、onActivated

9、onDeactivated

10、onErrorCaptured

11、onRenderTracked 状态跟踪

onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。

12、onRenderTriggered 状态触发

onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。

如果把onRenderTracked比喻成散弹枪，每个值都进行跟踪，那onRenderTriggered就是狙击枪，只精确跟踪发生变化的值，进行针对性调试。

注意：vue2.0的钩子函数也可以在vue3.0中进行使用

在vue3.0中使用watch

watch([overtext, () => data.select], (newValue, oldValue) => {
    console.log(`new---->${newValue}`);
    console.log(`old---->${oldValue}`);
    document.title = newValue[0];
});

当我们监听多个属性的时候，可以写成一个数组的形式进行监听，但是对于一个reactive中声明的对象，需要使用一个箭头函数来获取他的getter，这样才可以进一步进行使用。

对于ref中的数据，我们需要使用.value进行取值

3、vue3.0中的模块化开发

import { ref } from 'vue'
const nowTime = ref("00:00:00");
const getNowTime = () => {
    const now = new Date();
    const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours(),
        minute =
            now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes(),
        seconds =
            now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    nowTime.value = hour + ":" + minute + ":" + seconds;
    setTimeout(getNowTime, 1000);
};
export { nowTime, getNowTime }

我们将业务处理放到一个ts文件中进行处理，在用到的时候进行引入，再在setup（）函数中进行导出，那我们就可以在页面中进行使用了。

import { nowTime, getNowTime } from "../api/useNowTime";
return { getNowTime, nowTime }

使用模块化，让我们的代码变得更加简洁。

4、Teleport瞬间移动函数的使用

这个函数叫独立组件，它可以把你写的组件挂载到任何你想挂载的DOM上，所以说是很自由很独立的。

在/src/components/目录下，创建一个Teleports.vue的组件.

Teleport方法，可以把Dialog组件渲染到你任意想渲染的外部Dom上，不必嵌套再#app里了，这样就不会互相干扰了。你可以把Teleport看成一个传送门，把你的组件传送到你需要的地方。 teleport组件和其它组件没有任何其它的差异，用起来都是一样的。

使用的第一步是把你编写的组件用标签进行包裹，在组件上有一个to属性，这个就是要写你需要渲染的DOMID了。

5、Suspense-初识异步请求组件

Suspense提供两个template的位置，一个是没有请求回来时显示的内容，一个是全部请求完毕的内容。这样进行异步内容的渲染就会非常简单。

注意点:如果你要使用Suspense的话，要返回一个promise对象，而不是原来的那种JSON对象。

在components文件夹下边，新建一个AsyncShow.vue文件，然后边下代码如下：

<template>
  <h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        return resolve({ result: "JSPang" });
      }, 2000);
    });
  },
});
</script>

引入之后，想使用这个组件，记得要再components中进行声明，也就是把AsyncShow放入到components中。

const app = {
  name: "App",
  components: { AsyncShow },
  setup() {
    return {};
  },
};

这样自定义组件就可以使用了，我们的自定组件已经返回了Pronmise结果，所以可以直接使用Suspense来控制状态和输出内容。

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncShow />
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
</template>

可以看到Suspense是有两个template插槽的，第一个default代表异步请求完成后，显示的模板内容。fallback代表在加载中时，显示的模板内容。

Suspense也是支持async...await的语法的

<template>
    <img :src="result && result.imgUrl"  />
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
    async setup() {  //promise 语法糖  返回之后也是promise对象
        const rawData = await  axios.get('https://apiblog.jspang.com/default/getGirl')
        return {result:rawData.data}
    }
})
</script>

6、处理异步请求错误

在异步请求中必须要作的一件事情，就是要捕获错误，因为我们没办法后端给我们返回的结果，也有可能服务不通，所以一定要进行捕获异常和进行处理。

在vue3.x的版本中，可以使用onErrorCaptured这个钩子函数来捕获异常。在使用这个钩子函数前，需要先进行引入.

有了onErrorCaptured就可以直接在setup()函数中直接使用了。钩子函数要求我们返回一个布尔值，代表错误是否向上传递，我们这里返回了true。

const app = {
  name: "App",
  components: { AsyncShow, GirlShow },
  setup() {
    onErrorCaptured((error) => {
      console.log(`error====>`,error)
      return true  
    })
    return {};
  },
};