vue3 - 03.reactive全家桶

reactive:

1.ref可以赋值所有类型的参数，如Number，String，Boolean，Array，Object

2.reactive只支持引用类型参数，如Array，Object，Map，Set等...

3.ref修改值，需要*.value，reactive不需要，直接修改就可以

<template>
  <div>
    {
  {myInfo}}
  </div>
</template>
<script setup lang='ts'>
  import { reactive, ref } from 'vue'
  type Info = {
    user: string,
    pwd: string | number,
    name: string,
    age: number,
    sex: boolean
  }
  const myInfo = reactive<Info>({
    user: "admin",
    pwd: "123456",
    name: "xiaoming",
    age: 23,
    sex: true
  })
  myInfo.age = 24
</script>

在实际开发中，reactive可以用于声明一个数组或者对象，或者当我们请求一个异步接口获取数据在页面中渲染的时候，我们无法直接赋值，因为reactive是proxy响应，如果我们直接赋值，会破坏响应，所以我们可以用push+结构的方法

&