Vue3 reactive的响应式丢失详解

Vue3官方文档中一段针对reactive的描述

这其实是不严谨的，因为你如果真的这么写，state的响应式并不会出现问题，仅仅是第一个响应式对象被你丢弃了而已。

真正会丢失响应式的情况是什么呢？比如你在事件回调函数中对state整体重新赋值。

let state = reactive({ count: 0 })

function handle(){
  // 这里的更改并不能响应在视图上
  state = reactive({ count: 1 })
}

这其实更像是js语言的特性，而不是reactive的局限。

回到options API能够更清楚的讲清这个问题

export default {
  setup() {
    let state = reactive({ count: 0 });
    // 有效
    state = reactive({ count: 1 });

    function handle(){
      // 仅在作为回调函数等异步执行场景下无效
      // 且其后再对state进行任何操作都将无法反馈到视图
      state = reactive({ count: state.count + 1 });
    }
    
    // 有效
    handle();

    return {
      state,
      handle
    }
  }
}

可以看到，在return之前，可以对state重新赋值，不会影响响应式。

而在return之后，setupState已经生成，再对原闭包内的state进行修改，并不会影响到setupState。因为在setupState中保存的是state的引用，用这个引用进行操作，可以反馈到setupState。

而对这个引用重新赋值，相当于setupState中的state和闭包中的state已经变成两个不同的东西了。而视图的渲染更新是从setupState中取值的，自然对闭包中state的后续操作无法反馈到视图。

去试试吧。