Vue3.0与Vue2.X版本的区别

最近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进行双向绑定。