Vue2与Vue3的区别

发表于 | 分类于 |
字数统计: 630 | 阅读时长 ≈ 2

最大的区别是在响应式，所以我们先来说说响应式

响应式的区别

  • Vue2

    • 基于Object.defineProperty()只能监听到已有属性，对象直接添加或删除属性，界面是不会自动更新。并且它会为每一个属性添加上get set方法
    • 如果是数组的话，通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

  • Vue3

    • 通过Proxy和Reflect实现，而且是深层次的监视

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      //参数1：user-----》target目标对象  
              //参数2:handler----->处理器对象，用来监视数据，及数据的操作
              const proxyUser = new Proxy(user,{
                  get(target,prop){
                      return Reflect.get(target,prop)
                  },
                  set(target,prop,val){
                      console.log("set方法执行了")
                      Reflect.set(target,prop,val)
                  },
                  deleteProperty(target,prop) {
                      console.log("delet方法调用了")  
                      Reflect.deleteProperty(target,prop)
                  }
              })

      通过Proxy(代理)：拦截对data任意属性的任意操作，包括属性值的读写，属性的添加，属性的删除等

      通过Reflect(反射)：动态对被代理对象的相应属性进行特定的操作

之所以 Vue3.0 要使用Proxy 替换原本的Object.defineProperty原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，

但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷就是浏览器的兼容性不好

其他比较

Vue3是在2020年9月发布的，它支持了Vue2中的大多数特性

Vue3设计了一套强大的组合API代替了Vue2中的API，复用性更强了，更好的支持了TS

比如setup(),ref(),reactive()

3个新的组件：Fragment（片段）/ Teleport(瞬移) / Suspense(不确定)

  • Fragment

Vue3没有根标签，内部会将多个标签包含在一个Fragement虚拟元素中，可以高效批量处理多个节点，内存中保存n个element的容器对象（不与界面关联）从而减少页面渲染的次数

  • Teleport

teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示

  • Suspense

在动态组件没加载出来之前，空白部分给出过渡信息

1
2
3
4
5
6
7
8
9
10
<suspense>
  <!--异步组件-->
  <template #default>
    <zujian/>
  </template>
  <!--loading-->
  <template v-slot:fallback>
    <h1>Loading----------------------------------</h1>
  </template>
</suspense>