vue3+TS reactive设定类型方式
vue3+TS reactive设定类型
定义两个接口，第一个接口限制对象属性，第二个接口写Data属性
interface User {
username: string | null;
age: number | null;
sex: string | null;
}
interface Userdata {
data: [User];
}
const userList = reactive<Userdata>({
data: [
{
username: null,
age: null,
sex: null,
},
],
});
vue中的Reactive,ref,readonly
一、Reactive api
下面我们可以一个例子
如图所示，当我们点击button按钮的时候，是没有响应式效果的，此时我们需要reactive api。
那么这是什么原因呢？为什么就可以变成响应式的呢：
因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集，当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作，我们编写的data选项，也是在内部交给了reactive函数将其编程响应式对象的。
二、Ref api
reactive api对传入的类型是有限制的，要求我们必须传入一个对象或者数组，但是如果我们传入基本数据类型的话，会报一个警告（String, Number, Boolean）。
在template模板中，vue会自动帮助我们解包，所以我们不需要使用ref.value进行操作。
但是在setup内部，vue不会帮助我们进行解包操作，此时我们需要使用ref.value
ref的解包只是浅层解包
如上述两张图所示，第一张图，在ref对象外层嵌套了一层普通对象，此时在template中就必须加上value才可以访问。
在下面使用reactive对象进行嵌套，此时不需要加value也可以访问。
三、readonly api
我们通过reative和ref获取的响应式对象，但是在某一些情况下，我们希望这样数据可以传给其他组件，此时这些数据不能被修改，所以我们使用readonly函数。
readonly函数传入对象后，返回结果为代理对象(proxy对象，该对象的set方法被劫持，不能进行修改)。
readonly常见的传入对象
- 类型一:普通对象
- 类型二:reactive返回的对象
- 类型三:ref返回的对象
readonly返回的对象不允许修改，但是在readonly处理的原来的对象是允许被修改的。
readonly对象的本质是：readonly对象的返回结果的setter被劫持。
上面的并没有修改readonly属性的对象，所以可以在home组件中修改。
如上图所示使用readonly属性的就不可以进行更改。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Vue.nextTick 的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
vue+elementUI动态增加表单项并添加验证的代码详解
这篇文章主要介绍了vue+elementUI动态增加表单项并添加验证的代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12
本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路。通过实例代码给大家讲解了使用 Vue cli 3.0 构建自定义组件库的方法，感兴趣的朋友跟随小编一起看看吧2019-04-04
本文介绍Vue组件间通信方式，Vue组件间通信一直是个重要的话题，虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用Vuex往往会比较重，本文将系统的罗列出几种不使用Vuex，比较实用的组件间的通信方式，希望能帮助到大家2022-09-09
这篇文章主要为大家详细介绍了vue如何通过纯前端实现将页面导出为pdf和word文件,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-01-01
Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能，发现网上这方面的资料较少，所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
基于Vue el-autocomplete 实现类似百度搜索框功能
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
element-plus提供了uploader组件，但是不好定制化。所以本文将利用Vue3和element-plus实现一个图片上传的组件，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
表单验证在很多地方都可以用的到，本文主要介绍了element自定义表单验证上传身份证正反面的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论