vue3+ts的基础使用

ref

属性类型确定时有以下四种方式限制类型：

<script lang="ts" setup>
import { ref, Ref } from 'vue'
// 属性接口
interface book {
    name: string
    price: number
}
const name: Ref<string> = ref('张三');
const age = ref<number>(20);
const sex = ref('男') as Ref<string>;
const book = ref<book>({
    name: '假如生活欺骗了我',
    price: 110
})
</script>

渲染：

<p>我叫{{ name }}，年龄{{ age }}，性别是{{sex}}</p>
<p>我有一本书叫《{{ book.name }}》，价格是{{ book.price }}</p>

属性类型不确定时：

<script lang="ts" setup>
import { ref, Ref } from 'vue'
/**
 * sex（性别）类型不确定，可以用字符串（男，女）表示，也可以用数字（0，1）表示
 * 用泛型，T来代替这个类型，传什么类型，就是什么类型
 *  */
interface people<T> {
    name: string
    sex: T
}
const person = ref({
    name: '小花',
    sex: '女'
}) as Ref<people<string>>
<script>

渲染：

<p>有个人叫{{ person.name }}，性别是{{ person.sex }}</p>

reactive

属性确定时有一下三种方式限制属性类型：可根据需要把接口的地方换成基本类型

<script lang="ts" setup>
import { reactive } from 'vue'
interface person {
    name: string
    age: number
    sex: string
}
const father: person = reactive({
    name: '张三',
    age: 30,
    sex: '男'
})
const son = reactive<person>({
    name: '小张',
    age: 23,
    sex: '男'
})
const grandson = reactive({
    name: '小小张',
    age: 1,
    sex: '男'
})
<script>

渲染：

<p>我粑粑叫{{ father.name }}，年龄是{{ father.age }}，性别是{{ father.sex }}</p>
<p>我儿子叫{{ son.name }}，年龄是{{ son.age }}，性别是{{ son.sex }}</p>
<p>我孙子叫{{ grandson.name }}，年龄是{{ grandson.age }}，性别是{{ grandson.sex }}</p>

属性不确定时：同ref，将接口的地方改成泛型就可以了

<script lang="ts" setup>
import { reactive } from 'vue'
interface human<T> {
    name: string,
    age: number,
    sex: T
}
const stranger = reactive<human<string>>({
    name: '李四',
    age: 20,
    sex: '男'
})
<script>

渲染：

<p>有个陌生人叫{{ stranger.name }}，年龄是{{ stranger.age }}，性别是{{ stranger.sex }}</p>

computed

计算属性

<script lang="ts" setup>
import { computed,ComputedRef } from 'vue'
const count: Ref<number> = ref(10);
// 在js中拿取ref属性的值需要（属性.value），在template中不用
const doubleCount: ComputedRef<number> = computed((): number => count.value * 2)
const trebleCount = computed((): number => count.value * 3) as ComputedRef<number>
const fourfoldCount = computed<number>((): number => count.value * 4)
const fivefold = computed({
  get: () => count.value * 5,
  set: (val: number) => {
    count.value = val;
  },
});
fivefold.value = 20;
<script>

defineProps

一般情况：

<script lang="ts" setup>
import { defineProps } from 'vue'
const props = defineProps({
    temp: String,
    books: {
        type: Array as () => Array<string>,
        required: true,
        default: () => ([])
    },
    good: {
        type: Object as () => { name: string, price: number },
        required: true,
        default: () => ({})
    }
})
<script>

没有默认值时：

<script lang="ts" setup>
import { defineProps } from 'vue'
interface myProps {
    msg: string,
    list: Array<string>,
    add(): void
}
// 没有默认值
const props1 = defineProps<myProps>();
<script>

有默认值时：widthDefaults

<script lang="ts" setup>
import { defineProps,widthDefaults } from 'vue'
interface myProps {
    msg: string,
    list: Array<string>,
    add(): void
}
// 有默认值
const props2 = withDefaults(defineProps<myProps>(), {
    msg: '默认值',
    list: () => (['张三', '李四', '王麻子']),
    add: () => { }
})
<script>

defineEmits

<script lang="ts" setup>
import { defineEmits } from 'vue'
interface Emits {
    (event: 'getMsg', name: string): void
}
const emit = defineEmits<Emits>();
const transmit = (): void => {
    emit('getMsg', '我叫小花');
}
<script>

defineExpose

父组件：

<Son  ref='child'/>

<script lang="ts" setup>
import Son from "./Son.vue";
import { ref } from "vue";
const child = ref<any>();
const getMsg = (): void => {
  console.log("获取子组件expose的数据", child.value);
};
</script>

子组件：

<script lang="ts" setup>
import { ref,defineExpose } from "vue";
const msg = ref('11')
defineExpose({ msg });
</script>

方法

Vue3.0 取消了 methods 属性，所有组件的方法，都直接写

<template>
{{number}}<button @click='increment(number)'>+1</button>
<template>
<script lang="ts" setup>
import { ref } from 'vue'
const number = ref<number>(20);
/**
 * @function 数量+1
 * @param count 
 * @return {void}
 */
const increment = (count: number): void => {
    number.value = ++count;
}
<script>

路由的引入

路由文件index.ts:

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

仓库（vuex）的引入

仓库文件中index.ts:

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在main.ts中引入：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

​