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属性的就不可以进行更改。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。