怎么在Vue3 中侦测数据

Vue3是目前最新版本的Vue框架，相比Vue2在数据侦测方面有了很大的改进和优化。Vue3采用了Proxy代理对象来实现了数据侦测，相比Vue2的Object.defineProperty()，Proxy更加灵活且拥有更多的API，可以更加深入的监听数据的变化。

在Vue3中，数据的侦测可以分为两种情况：响应式数据和非响应式数据。

1. 响应式数据

响应式数据是通过Vue3提供的reactive()函数进行处理的，它可以将一个普通对象转化为响应式对象。这样一来，当我们修改响应式对象中的某个属性时，Vue3会自动更新视图中相关的内容。

代码示例：

import { reactive } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
  name: 'Vue3'
});

// 修改响应式对象中的属性
state.count++;

// Vue3会自动更新视图中相关的内容

上面的代码中，我们使用了Vue3提供的reactive()函数将一个普通对象转化为了响应式对象，并给它添加了两个属性：count和name。当我们修改count属性时，Vue3会自动更新视图中相关的内容。

2. 非响应式数据

非响应式数据是指没有经过Vue3处理的普通对象或数组，它们并不会被Vue3自动监听。如果我们想要监听非响应式数据的变化，可以使用Vue3提供的watch()函数。

代码示例：

import { reactive, watch } from 'vue';

// 创建一个普通对象并赋值给变量obj
const obj = { name: 'Vue3' };

// 创建一个响应式对象state，并在其中添加一个watcher
const state = reactive({
  obj,
  watcher: 0
});

// 监听obj对象的变化
watch(() => state.obj, () => {
  console.log('obj has changed');
});

// 修改obj对象中的属性
obj.name = 'Vue4';

上面的代码中，我们创建了一个普通对象obj，并将它赋值给响应式对象state中的一个属性。我们还使用watch()函数监听obj对象的变化，当obj中的属性发生变化时，Vue3会自动执行回调函数中的代码。最后我们修改了obj对象的name属性，这时控制台就会输出obj has changed。

除了使用watch()函数，我们还可以使用Vue3提供的ref()函数将一个非响应式对象转化为一个响应式对象。ref()函数只能用于包装基本类型的数据，例如数字、字符串等，它们的值是不可变的。

代码示例：

import { ref } from 'vue';

// 创建一个普通数组并赋值给变量arr
const arr = [1, 2, 3];

// 创建一个包装了数组的ref对象，并赋值给变量list
const list = ref(arr);

// 修改ref对象中的属性
list.value.push(4);

// Vue3会自动更新视图中相关的内容

上面的代码中，我们使用ref()函数将一个普通数组转化为了响应式对象，并给它添加了一个属性list，它的值就是被包装过的数组。当我们往list中添加元素时，Vue3会自动更新视图中相关的内容。需要注意的是，我们在修改ref对象的值时必须使用value属性，而不能直接修改对象本身的属性。

总结

在Vue3中，数据的侦测分为响应式数据和非响应式数据。响应式数据可以通过reactive()函数进行处理，它们会被Vue3自动监听并更新视图。非响应式数据可以使用watch()函数进行监听，并且可以使用ref()函数将其转化为响应式数据。Vue3的数据侦测使用了Proxy代理对象，相比Vue2的Object.defineProperty()更加灵活且拥有更多的API。