版本2与版本3之间的区别是什么？

数据绑定原理发生变化

`vue2` 的双向数据绑定是利用了`es5` 的一个`API Object.definepropert()` 对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的`proxyAPI`对数据进行处理。

相比与vue2，使用proxy API优势有以下三点：

1、defineProperty只能监听某个属性，不能对全对象进行监听；
2、可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；
3、可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。双向数据绑定的核心是数据变化侦测及依赖收集。

`vue2`的描述

- 数据变化侦测

**对象变化侦测**

转化响应式数据需要将 Vue 实例上 data 属性中定义的数据通过递归将所有属性都转化为 getter/setter 的形式，Vue 中定义了一个 Observer 类来做这个事情。

vue3的描述

Vue3 中每个功能单独为一个模块，并可以单独打包使用，下面讨论一下Vue3 中与数据响应式相关的Reactive 模块，了解其内部原理，与 Vue2 相比又有何不同。因为该模块能单独使用，这个是这个模块的用法示例：

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue3 demo</title>
</head>
<body>
 <div id="app">
  <div id="count"></div>
  <button id="btn">+1</button>
 </div>
 <script src="./vue3.js"></script>
 <script>
  const countEl = document.querySelector('#count')
  const btnEl = document.querySelector('#btn')
  // 定义响应式数据
  const state = reactive({
   count: 0,
   man: {
    name: 'pan'
   }
  })
  // 定义计算属性
  let double = computed(() => {
   return state.count * 2
  })
  // 回调函数立即执行一次，内部使用到的数据更新时会重新执行回调函数
  effect(() => {
   countEl.innerHTML = `count is ${state.count}, double is ${double.value}, man's name is ${state.man.name}`
  })
  // 修改响应式数据触发更新
  btnEl.addEventListener('click', () => {
   state.count++
  }, false)
 </script>
</body>
</html>

通过示例可以看到实现 Vue3 这个数据响应式需要有 reactive、computed、effect 这几个函数

composition API

Vue2 与vue3 最大的区别是vue2使用选项式api，对比vue3组合式api。旧得选项型api在代码里分割了不同得属性：data,computed,methods等；新得合成型api能让我们使用方法来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。这种就叫做组合式Api，这样可以将同一逻辑的内容写到一起。

建立数据data

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。使用以下三步来建立反应性数据： 1. 从vue引入reactive；2.使用reactive() 方法来声明数据为响应性数据；3. 使用setup()方法来返回我们得响应性数据，从而template可以获取这些响应性数据。

怕担责任，怕被我误导的可别点进来看！！！ vue3和vue2的不同