vue3+ts部分场景示例

模板语法

插值变量

div{{插值}}div
const message: number = 84;				指定变量为数字类型
const message: string='小明' ;			指定字符串类型
const message: boolean=false ;			指定布尔值类型
const message: any='小明' ;				any指定任意类型
const message: object={} ;				指定对象类型
const message: array=[]					指定数组类型
...
...
1
2
3
4
5
6
7
8
9

插值表达式

v-for循环

普通数组
<div v-for="item in arr")>{{item}}div
const arr:Array<number>=[1,2,3,4,5]

数组包对象
div{{插值}}div
const arr:Array<any'>=[{name:"小明"，age:"15"},{name:"小明"，age:"15"}]
1
2
3
4
5
6
7

v-modle双向绑定

	<input v-model="message" type="text">
div{{message}}div

setup内
import {ref} from "vue"
const message = ref("test")
1
2
3
4
5
6

ref修改对象属性

ref支持所有的类型
ref操作要输出或者修改对象内的某一个属性前面要加.value

推荐数据比较复杂时候才推荐使用泛型

普通对象这样使用（代码可以自己类型推导分辨出来）

reactive修改对象属性

reactive只支持引用类型
reactive修改操作属性不需要加.value
reactive适用于操作一些表单数据使用

使用v-model绑定的属性，在自定义更改内容后输出内容也更着变化

reactive操作数组

reactive不能直接赋值，会破坏掉响应式对象

解决方式：数组可以使用push加解构赋值

toRef

非响应式对象使用不起作用

作用：

创建一个 ref 对象，其value值指向另一个对象中的某个属性。

语法：

<script setup lang="ts">
import { ref, reactive, toRef } from "vue";
const obj = reactive({ name: "小米", age: 18 });
const person = toRef(obj, "name");
const change = () => {
  person.value = "小刚";
  console.log(person);
};
</script>

<template>
  <div>{{ obj }}</div>
  <div>toRef:{{ person }}</div>
  <button @click="change()" type="button" style="width: 50px; height: 20px">
    修改
  </button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

应用:

要将响应式对象中的某个属性单独提供给外部使用时。(更改person字段时，原obj对象字段也更着改变)

toRefs

toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

对象解构，这个时候如果用到reactive,是无法实现响应式效果的，需要配合torefs

语法：

<template>
  <div>
    <button @click="btn">+</button>
    <div>{{ age }}</div>
  </div>
</template>
 
<script setup>
import { reactive, toRefs } from "vue";

const info = reactive({
  name: "zyb",
  age: 18,
});
let { age, name } = toRefs(info);

const btn = () => {
  age.value++;
  console.log("age---", age.value);
};
</script>
 
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用场景