Basic use of vue3+ts

Basic use of vue3+ts

ref

When the attribute type is determined, there are four ways to limit the type:

<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>

rendering:

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

When the attribute type is uncertain:

<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>

rendering:

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

reactive

There are three ways to limit the attribute type when the attribute is determined: the interface can be replaced with the basic type according to the need

<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>

rendering:

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

When the attribute is uncertain: same as ref, just change the interface to generic

<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>

rendering:

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

computed

computed property

<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

generally:

<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>

When there is no default:

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

When there is a default value: 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

parent component:

<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>

Subassembly:

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

method

Vue3.0 cancels the methods attribute, and all component methods are written directly

<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>

The introduction of routing

Routing file 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.tsIntroduced in

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

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

Introduction of warehouse (vuex)

In the repository file index.ts:

import {
    
     createStore } from 'vuex'

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

Introduced in main.ts:

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

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

​