【Vue 3-reactive】为什么给一个reactive包裹变量重新赋值，上一个数据源会失去响应性

在Vue.js中，使用reactive包裹变量可以实现数据响应式。这意味着，当reactive包裹的变量发生变化时，Vue.js会自动检测到变化，并触发相应的更新

但是，如果给一个reactive包裹的变量重新赋值，上一个数据源就会失去响应性。这是因为，Vue.js的数据响应式是通过对象的属性变化来实现的。当给一个变量重新赋值时，实际上是新建了一个新的对象，而上一个对象就被丢弃了。因此，Vue.js无法检测到变化，也就无法触发更新。

例如，下面的代码定义了一个reactive包裹的变量，并通过计时器每隔一秒钟更新这个变量：

import { reactive } from 'vue'

// 定义一个reactive包裹的变量
const data = reactive({
  time: new Date()
});

// 每隔一秒钟更新变量
setInterval(() => {
  // 注意：这里更新变量会导致上一个数据源失去响应性
  data.time = new Date();
}, 1000);

上面的代码中，每隔一秒钟会重新赋值变量，这会导致上一个数据源失去响应性。在这种情况下，需要使用Vue.js提供的set方法来更新变量

Vue.js提供了set方法

import { reactive, set } from 'vue'

// 定义一个reactive包裹的变量
const data = reactive({
  time: new Date()
});

// 使用set方法来更新变量
set(data, 'time', new Date());