vue2 对比vue3

vue2 传统选项式api，逻辑比较分散，可读性差，可维护性差

vue3 composition Api 组合式api，逻辑分明，可维护性高，完美支持ts，更接近面向对象

重写双向绑定

vue2 基础Object.defineProperty()实现
vue3 基于Proxy

proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势：
 
//丢掉麻烦的备份数据
//省去for in 循环
//可以监听数组变化
//代码更简化
//可以监听动态新增的属性；
//可以监听删除的属性 ；
//可以监听数组的索引和 length 属性；
let proxyObj = new Proxy(obj,{
  get : function (target,prop) {
    return prop in target ? target[prop] : 0
  },
  set : function (target,prop,value) {
    target[prop] = 888;
  }
})

优化Vdom，Vue Template Explorer

vue2， 每次更新diff，都是全量对比
vue3， 只对比带有标记的，大大减少非动态内容的对比

// 新增了 patch flag 标记
TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 /* TEXT */
这个标记就叫做 patch flag（补丁标记）
patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。

Vue3 Fragment

vue2 template模板根节点只允许存在一个
vue3 完美支持多个根节点

<template>
  <div>12</div>
  <div>23</div>
</template>
// jsx 语法
render() {
  return (
      <>
          {this.visable ? (
              <div>{this.obj.name}</div>
          ) : (
              <div>{this.obj.price}</div>
          )}
          <input v-model={this.val}></input>
          {[1, 2, 3].map((v) => {
             return <div>{v}-----</div>;
          })}
      </>
  );
},

Vue3 Tree shaking

vue2，无论我们使用什么功能(watch, method, computed ...)，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用
vue3，tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中，要用watch 就是import {watch} from 'vue' 其他的computed 没用到就不会给你打包减少体积