VUE3跟VUE2的区别

1.组合式api（compositionapi）setup函数

 

**vue3相较于vue2最大的不同点就在于组合式api和选项式api的不同** 在vue3中我们常常会使用setup语法糖进行代码的书写,摒弃了原来的data、methods,mounted等,setup语法糖 告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。 组合式api对于代码书写的好处,它能够让代码更集中的进行管理,如果结合hooks组件 我们能够让代码变得更加易读和优雅

2.新的响应式原理ref 和 reactive

ref 数据响应

作用：基本数据类型的数据响应定义 或者dom连接

• 基本数据类型绑定

  • 创建 RefImpl 响应式 Proxy 对象 ref 内部: 通过给 value 属性添加 getter/setter 来实现对数据的劫持
  • 定义数据之后，模板里面直接使用值
  • 修改数据 用.value 属性修改

• 响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包

reactive 数据响应

作用： 引用类型的数据响应定义

• 作用: 定义多个数据的响应式
• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

3.toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref 。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

4.toRefs

作用：将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref 。

当从组合式函数返回响应式对象时， toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开

5.diff算法优化

Vue2中的虚拟Dom是全量比较。Vue3新增静态标记（PatchFlag）。在与数据变化后，与上次虚拟DOM节点比较时，只比较带有PatchFlag标记的节点。并且可以从flag信息中得知具体需要比较的内容。

5.vue3的computed 与vue2没有太大区别

6.生命周期

7.Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。

那 Vue3 为何会抛弃它呢？那肯定是因为它存在某些局限性。

主要原因：无法监听对象或数组新增、删除的元素。

Vue2 相应解决方案：针对常用数组原型方法push、pop、shift、unshift、splice、sort、reverse进行了hack处理；提供Vue.set监听对象/数组新增属性。对象的新增/删除响应，还可以new个新对象，新增则合并新属性和旧对象；删除则将删除属性后的对象深拷贝给新对象。

• Proxy Proxy 是 ES6 新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性。

8.vue3支持碎片（Fragments）

vue2

<template>
  <div class='form-element'>
      <h2> {{ title }} </h2>
  </div>
</template>

vue3

<template>
  <div class='form-element'>
  </div>
  <h2> {{ title }} </h2>
</template>

9.父子传参不同，setup（）函数特性

总结：

1. setup()函数 可以接收两个参数：（props，context（包含attrs，slots，emit））

2.setup函数是出于生命周期函数的beforeCreate和created两个钩子函数之前的函数

3.执行setup是，组件实例尚未被创建（在setup内部，this不会是该活跃实例的引用，所以不指向vue实例，vue为了避免我们错误的使用，直接将setup函数中的this修改成了undefined）

4.与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

5.使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

注意事项：

1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，可以通过使用 setup 函数中的toRefs 来完成此操作：
父传子，props

后续补充......................