vue3怎么实现响应式的？

Vue3使用了Proxy对象来实现响应式。当一个对象被设置为响应式后，当该对象的属性被修改时，会自动触发更新。具体实现方式如下：

1. 使用 reactive 函数将一个对象转换为响应式对象。

import { reactive } from 'vue';

const obj = {foo: 'bar'};
const reactiveObj = reactive(obj);

2. 使用 ref 函数将一个基本类型的值转换为响应式对象。

import { ref } from 'vue';

const count = ref(0);
count.value++; // 修改 count 的值

3. 使用 computed 函数创建一个计算属性。

import { reactive, computed } from 'vue';

const obj = reactive({foo: 'bar'});
const computedProp = computed(() => {
  return obj.foo + '123';
});

4. 使用 watch 函数监听响应式对象的变化。

import { reactive, watch } from 'vue';

const obj = reactive({foo: 'bar'});
watch(() => obj.foo, (newVal, oldVal) => {
  console.log(`obj.foo changed from ${oldVal} to ${newVal}`);
});