我要评论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属性的就不可以进行更改。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论