【Vue3】Vue3中reactive变量重新赋值无法响应的三种处理方法（已解决）

第一种解决方案：变量值包裹对象，加一个{data:变量值}

1、html

  <div>a=【{
   
   {a.data}}】</div>
  <div>-----------------</div>
  <div>【{
   
   { b.data[0] }}】</div>
  <div>【{
   
   { b.data[1] }}】</div>
  <div>【{
   
   { b.data[2] }}】</div>

2、定义reactive变量

    let a=reactive({data:"110"});

    let b=reactive({data:[0,1,2]});

3、重新赋值

      a.data="119";
      b.data=[...[9,8,7]];

 第二种解决方案：ref

1、html

  <div>a=【{
   
   {a}}】</div>
  <div>-----------------</div>
  <div>【{
   
   { b[0] }}】</div>
  <div>【{
   
   { b[1] }}】</div>
  <div>【{
   
   { b[2] }}】</div>

2、定义ref变量

    let a=ref("110");
    let b=ref([0,1,2]);

3、赋值

      a.value="119";
      b.value=[...[9,8,7]];

第三种方案：push（不推荐）