vue3中ts写法

<script lang="ts" setup>
const yy = ref<number>(10)
const name = ref<string>('')
// console.log(yy.value)
console.log(name.value);
const state = reactive({ count: 0 })
const form = reactive<
    {
        name: string;
        region: string;
        date1: [Date, Date];
        date2: [Date, Date];
        delivery: boolean;
        type: any;
        resource: string;
        desc: string
    }
>({
    name: '22',
    region: '',
    date1: [new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)],
    date2: [new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)],
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const cancel = () =>{
    console.log('取消');
}

const add = () =>{
    state.count++
}
const de = () =>{
   yy.value++
}
</script>
<template>
   <div>
    <div @click="add">{{ state.count }}</div>
    <div @click="de">{{ yy }}</div>
    <el-form :model="form" label-width="120px">
        <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
            <el-col :span="11">
                <el-date-picker
        v-model="form.date1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
            </el-col>
            <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
            </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="Activity type">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="Online activities" name="type" />
                <el-checkbox label="Promotion activities" name="type" />
                <el-checkbox label="Offline activities" name="type" />
                <el-checkbox label="Simple brand exposure" name="type" />
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
                <el-radio label="Sponsor" />
                <el-radio label="Venue" />
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button @click="cancel">Cancel</el-button>
        </el-form-item>
    </el-form>
   </div>
</template>
  
  
  

vue3主要结构

<script lang="ts" setup>
写逻辑
</script>
<template>
写主要结构
</template>
<style>
写样式
</style>

ref与reactive是响应式

ref可看作给目标源的value增加一个属性，并且要标注清楚属性类型

const yy = ref<number>(10)
console.log(yy.value)
const name = ref<string>('')
console.log(name.value);

reactive可以看作是目标源固有的属性

const state = reactive({ count: 0 })
console.log('hi',state.count);

reactive可以多个同时声明

const form = reactive<
    {
        name: string;
        region: string;
        date1: [Date, Date];
        date2: [Date, Date];
        delivery: boolean;
        type: any;
        resource: string;
        desc: string

    }

>({
    name: '22',
    region: '',
    date1: [new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)],
    date2: [new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)],
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

vue3中方法写法（箭头函数）

const add = () =>{
    state.count++
}

vue3中watch监听写法

1. 监听对象中的值时

watch(
    ()=>form.name,
    (val,old)=>{
        console.log("新数据",val)
        console.log("老数据",old)
    }
)

2. 监听值时

watch(
    ()=>state.count,
    (val,old)=>{
        console.log("新数据",val)
        console.log("老数据",old)
    }
)

ts中三种声明数据方式（type，interface，enum）

type可适用很多类型

// 1.Type声明数据类型的例子：Type声明数据类型时可以定义一个新的类型别名，可以使用对象、联合类型、元组等方式定义数据类型。
type Person = {
  name: string;
  age: number;
  gender: string,
}
let datas = ref<Person>( )
// 定义普通变量不是响应式
let data:Person={ name:"1",age:1,gender:"ddd"}
console.log(data);
console.log(datas);
// 定义普通变量不是响应式
let age:number=10
console.log(age);

type Point = [number, number];
//如果有爆红是因为没有ref或者reactive

interface仅可适用对象

//2. Interface声明数据类型的例子：interface只能声明对象类型,可以定义一个新的接口，可以使用对象、函数等方式定义数据类型。
interface Persons {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

interface Points {
  x: number;
  y: number;
}

enum不常用

// 3.Enum声明数据类型的例子：Enum通常用于定义一组有限的值
enum Color {
  Red,
  Green,
  Blue,
}

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}