代码例子说明vue2和vue3响应式的区别

Vue2和Vue3的响应式机制有一些区别。在Vue2中，使用Object.defineProperty来实现响应式，而在Vue3中，使用了新的Proxy和Reflect来实现响应式。

在Vue2中，通过Object.defineProperty将对象的属性转换为getter和setter，从而实现对属性的监听和响应。这种方式需要在初始化时递归遍历对象的所有属性，并将它们转换为getter和setter。这种方式存在一些限制，例如无法监听新增的属性和数组的变化。

而在Vue3中，使用Proxy和Reflect来实现响应式。Proxy可以拦截对对象的访问和修改操作，并在这些操作发生时触发相应的响应。相比于Vue2的Object.defineProperty，Proxy具有更强大的功能和更好的性能。它可以监听新增的属性和数组的变化，并且可以直接监听整个对象，而不需要递归遍历。

下面是一个简单的例子来说明Vue2和Vue3响应式的区别：

Vue2响应式示例：

// Vue2
var data = { count: 0 };

var vm = new Vue({
  data: data,
  created: function() {
    console.log('Vue2 created');
  }
});

console.log(vm.count); // 输出：0

vm.count = 1; // 修改属性值
console.log(vm.count); // 输出：1

Vue3响应式示例：

// Vue3
import { reactive, watch } from 'vue';

var data = reactive({ count: 0 });

watch(() => {
  console.log('Vue3 created');
});

console.log(data.count); // 输出：0

data.count = 1; // 修改属性值
console.log(data.count); // 输出：1

在Vue2中，我们需要通过Vue实例来访问响应式的数据，并且需要在创建Vue实例时将数据传入。而在Vue3中，我们可以直接使用reactive函数将一个普通对象转换为响应式对象，并且可以直接访问响应式对象的属性。