编辑
2023-04-04
VUE3
0
请注意,本文编写于 578 天前,最后修改于 569 天前,其中某些信息可能已经过时。

目录

Ref
说明
注意点
Eg
配合TS使用
自动推导
传入泛型
创建响应式数据之reactive
说明
参数
特点
Eg
配合TS使用
自动推导
使用接口

Ref

说明

ref()方法用于创建任何值类型的响应式数据

1、ref()方法将传入的参数包装为ref对象,通过.value形式获取到的数据为响应式的,在此基础上进行赋值操作才是响应式的 2、在template中并不需要添加.value,程序会自动添加.value 3、null作为原始数据类型采用ref包裹

注意点

常用于对基本数据类型实现响应式数据 对于应用数据类型虽然可以处理,但是实际上求助于reactive实现

Eg

ts
<template> <!-- 模板中不需要添加.value,程序会自动处理 --> <p @click="addnum">{{a}}</p> </template> <script> import {ref} from 'vue'; export default { name: 'App', setup(){ let a=ref(0) function addnum(){ console.log('a',a) /* console.log a RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0} dep: Set(1) [[Entries]] n: 0 w: 0 size: 1 [[Prototype]]: Set __v_isRef: true __v_isShallow: false _rawValue: 1 _value: 1 value: 1 [[Prototype]]: Object */ // 需要通过.value形式获取到响应式数据,在此基础上操作 a.value++ } return { a, addnum } } } </script> <style> </style>

配合TS使用

自动推导

ref会根据初始化时的值推导其类型

ts
import { ref } from 'vue' // 推导出的类型:Ref<number> const year = ref(2020)

传入泛型

在调用ref()时传入一个泛型参数,覆盖其默认的推导 若指定了一个泛型参数,但是没有指定初始值,则会得到一个对应参数和undefind构成的联合类型

ts
import { ref } from 'vue'; import type { Ref } from 'vue' let serchType: type<boolean> = ref(false); // 推导得到的类型:Ref<number | undefined> const n = ref<number>()

创建响应式数据之reactive

说明

通过reactive()方法创建一个响应式对象或数组

参数

reactive参数只能是对象、数组、map和set

特点

1、VUE3使用reactive包裹的数组,可以直接通过角标更改,会检测到更改,但是Vue2中不会 2、VUE3使用reactive包裹的对象,对于对象不存在的属性可以直接更改赋值

Eg

vue
<template> <p @click="addnum">{{ a }}</p> <p @click="changeB">{{b}}</p> </template> <script> import { reactive } from "vue"; export default { name: "App", setup() { let a = reactive({name:"xm",age:19}); let b = reactive(['x','y','z']) function addnum() { a.name='xh' a.like="com" // vue2中对于对象不存在的属性无法直接更改,vue3可以 } function changeB(){ b[0]='a' // vue2中直接通过数组角标无法更改,vue3可以 } return { a, b, addnum, changeB }; }, }; </script> <style></style>

配合TS使用

自动推导

reactive同样会根据初始值推导类型

ts
// 推导得到的类型:{ title: string } const titleinfo = reactive({ title: '标题' })

使用接口

通过定义接口的方式指定reactive的类型

ts
interface titleInterface { title: string } const titleinfo:titleInterface = reactive({ title: '标题' })

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!