关于vue.js:Vue30与Vue2X版本的区别

最近 Vue.js 大火，很多公司或者我的项目都在用 Vue.js 进行重构，从去年下半年公布开始，Vue.js3 有什么扭转，在这里简略的说几点。

1、生命周期的扭转

（1）vue2 中的 beforeCreate 和 created 被一个新增的 setup 生命周期函数代替，setup 函数会在组件创立之前就执行。（2）beforeDestory 和 destoryed 别离改名为 beforeUnmount 和 unmounted。

2、性能方面的扭转

（1）数据劫持方面的扭转，由原来的 Object.defineProperty() 进行数据劫持，扭转为 Proxy 进行数据代理。因为 proxy 能够动静判断该数据是否为深层嵌套数据，而 object.defineProperty() 为遍历深层嵌套数据，导致了两者在数据劫持上产生了工夫上的微小差距。（2）打包策略，vue3 反对了 tree-shaking，排除任何未理论应用的代码，打包体积减小。因为打包后体积减小，页面加载文件所需的工夫也极大缩短。（3）diff 优化，vue3 中会对动态节点进行晋升，所有的动态节点在进行比照时不会被遍历。在进行节点比照时所需的工夫也大大减少。

3、新增的 compositionAPI（组合式 API）
解决了 Vue2.X 版本的 optionsAPI 不能解决的复用和可读性差的缺点。
新增了一个 setup() 生命周期函数，会在组件创立之前就执行。用 setup 生命周期代替 beforeCreate 和 created。

  const {ref,reactive,onMountend,toRefs} = Vue
  setup(props){
     // 申明简略数据类型和简单数据类型
     // 只能通过.value 的模式获取数据
     const refValue = ref(null);
     // 只能申明简单数据类型
     // 申明的数据类型不能构造
     // 申明的数据类型是 proxy 对象
     const reactiveValue = reactive({state:0});
     // 生命周期的应用（on 加生命周期名字）onMountend(()=>{// 在相应的生命周期内执行相应操作})
     // 该类型的数据不能解构，解构就会失去响应式特点
     console.log(props);
     // 该办法将 proxy 对象转化成 ref 变量
     toRefs(props);
  } 

还能够将雷同的代码进行封装，进步了代码可读性。
4、v-model 的变动

 反对绑定多个 v -model 进行双向绑定。