Vue3+Vite2+typescript的基础用法(1)

前言

虽然已经2021.7月了，但是靓仔还是没有项目真正用到vue3+vite2。所以在Vue3 + SSR + Vite中承诺的出项目实战只能延后了。

之所以想写这篇文章，是因为靓仔自己也不怎么会Vue3+Vite2+Typesctripts（主要公司项目没用上这些东西）。所以就当给自己和大家查漏补缺吧。

主要内容

1. 搭建vue3+vite2+ts的项目
2. vue3 composition api各种写法
3. vue3生命周期展示
4. 集成 vuex@4和vue-router@4
5. 集成axios
6. ...（大家想到有什么想要了解的可以留言，我会在后续文章中去更新它）

项目搭建

大家可以参考vite官方文档

由于我们项目中要使用到ts所以我们用vue-ts这个模板

npm init vite@latest my-vue-app --template vue-ts

命令运行完成后我们进入到项目cd my-vue-app执行npm i && npm run dev 然后打开浏览器，在url中输入http://localhost:3000/就能看到效果了

composition api 各种写法演示

我们使用vscode打开项目，打开src/App.vue后可以看到

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>

其实这个写法还是vue2的但是vue3去做了兼容。接下来把它改造成vue3的setup写法

<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

少了很多代码，但是项目还是可以运行，没有报错。细心的小伙伴可能会发现name: 'App'这个字段没有了。这就是其中的坑，一些自定义组件其他字段还是只能用export default defineComponent({})这个写法

然后打开src/components/HelloWorld.vue

<script lang="ts">
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup: () => {
    const count = ref(0)
    return { count }
  }
})
</script>

改造后

<script lang="ts" setup>
import { ref, defineProps } from "vue";
defineProps({
  msg: {
    type: String,
    required: true,
  },
});
const count = ref(0);
</script>

这里多了两个在vue2中没见过的东西ref, defineProps

props

defineprops可以看的出来是替代props的，ref可以看出来是替代data的。

我们先来说说defineprops的另外几种用法

<script setup lang="ts">
import { ref, defineProps } from "vue";
type Props = {
  msg: String
}
defineProps<Props>()
const count = ref(0);
</script>

应该还有一种，但是这样运行起来会报错

<script setup="props" lang="ts">
import { ref, toRefs, defineComponent } from "vue";
const { msg } = toRefs(props)
const count = ref(0);
</script>

<script lang="ts">
import { ref, toRefs, defineComponent } from "vue";
// 这样写就没问题，很奇怪
export default defineComponent( {
  props: {
    msg: String
  },
  setup(props: any) { // 这应该是(props: Props) 但是这个Props找不到引用的地方，就写了any
    const {msg} = toRefs(props);
    
    const count = ref(0);
    return {msg, count}
  },
});
</script>

ref, toRef, toRefs, reactive 用法跟区别

首先我们先来看ref和reactive的几种写法用法

<template>
  <h1>{{ msg }}</h1>
  <p>{{ state.msg }}</p>
  <div v-for="item in list" :key="item.msg">
    {{ item.msg }}
  </div>
  <button type="button" @click="handleClick">count is: {{ count }}</button>
</template>
<script setup lang="ts">
import { ref, defineProps } from "vue";
type Props = {
  msg: String;
};
defineProps<Props>();
const count = ref(0);
const state = ref<Props>({ msg: "123" });
const list = ref<Props[]>();
console.log(count.value);
console.log(count);
list.value = [
  { msg: "item 1" },
  { msg: "item 2" },
  { msg: "item 3" },
  { msg: "item 4" },
];
const handleClick = () => {
  count.value++;
};
</script>

在<scripts></scripts>中你要访问count的变量的话必须要通过count.value，而在<template></template>中不需要

下面我们来看reactive toRef toRefs几种用法

<template>
  <div>
    <div v-for="item in data1.todoList" :key="item.id">
      {{ item }}
    </div>
    <button type="button" @click="handleClick">
      count is: {{ data2.count }} double count is: {{ data2.double }}
    </button>
    <p>tempCount is {{ tempCount }}</p>
    <p>count is {{ count }}</p>
    <p>double is {{ double }}</p>
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, computed, toRef, toRefs } from "vue";
type Todo = {
  id: number;
  message: string;
  completed: boolean;
  time: string;
};
type State = {
  count: number;
  double: number;
};
const data1 = reactive({
  todoList: [] as Todo[],
});
const data2: State = reactive({
  count: 0,
  double: computed(() => data2.count * 2),
});
const tempCount = toRef(data2, "count");
const { count, double } = toRefs(data2);
const handleClick = () => {
  data2.count++;
};
onMounted(() => {
  const todos: Todo[] = [
    {
      id: 1,
      message: "todo1",
      completed: true,
      time: "2021-7-15 07:00",
    },
    {
      id: 2,
      message: "todo2",
      completed: false,
      time: "2021-7-15 07:00",
    },
  ];
  data1.todoList = todos;
  data1.todoList.push({
    id: 3,
    message: "todo3",
    completed: true,
    time: "2021-7-15 07:00",
  });
});
</script>

reactive和ref给我主观的感觉就是reactive声明响应式对象会比较方便，ref声明简单的变量比较方便。他们有很多异曲同工之处

结尾

这次文章先写到这里（主要开头废话太多，怕篇幅太长，看的让人厌烦），现在就写了1和2两点。下篇文章我会更新watch watchEffect context vue生命周期的相关内容。

新人作者希望大家多多点赞?

有什么意见、建议、写错的地方或者其他用法希望大家可以留言，大家互相学习一起进步

项目地址

1. github
2. gitee