vue3响应性的丢失和保留

为什么会丢失响应性

失去响应性的情况出现在解构时。

vue2中使用Object.defineProperty()实现响应式，其原理是拦截了对象中属性的get/set，即使该属性被解构出来，仍然保留了get/set，因此不会丢失响应性。

而vue3中使用Proxy实现响应式，其原理是拦截了proxy对象的get/set，因此属性被解构出来后，对属性的读写不再经过原proxy对象的get/set，就丢失了响应性。

vue3中丢失响应式的情况比如有：解构响应式对象（即reactive()创建的对象）、解构props。

如何保留响应性

只要给响应式对象包一层toRefs即可：

function useMouse() {
  const mouse = reactive({x: 0, y:0})

  // 监听 mousemove 事件

  return toRefs(mouse)
}

// x，y带有响应性
const {x, y} = useMouse()

toRefs() 函数可以将 reactive()创建出来的响应式对象, 转换为普通对象, 而这个普通对象上的而每一个属性都是响应式的。这样就解决了解构赋值的时候丢失响应性的问题了。