vue3引路

vue3出来几个月了，项目上也已经分别成功使用了defineComponent及class两种模式踩坑，且已上线，空了来整理下大概的变化以及一些心得.因为已经成功踩坑，应该相对比较全面.

下面来说vue3.0的新特性

1. vue3采用ES6中Proxy来取代vue2中Objest.defineProperty,修改了vue2中无法监听对象新增或删除属性的bug，根结原因就是Objest.defineProperty只是监听的对象中的每个属性，而Proxy则是代理的整个对象,这也是vue3本次更改的最大亮点之一(建议手动敲一敲两者的具体实现操作) this.$set(this.param,'c','西门庆') //vue2 这句代码在vue2中应该都很熟悉 vue3中则不用
2. vue3本次采用composition API(即组合式API)模式，所有代码都放到setup中返回，而vue2中则是采用Options API(这个特点的变更其实是改变开发者的一种习惯，从vue2的标准开发模板回归到js的开放式开发，在vue2中每部分的代码严格限制在各个部分中 如 定义方法只能写在methods中，vue3则是更自由，其实就是一种习惯的改变)
3. 提供了更好的tree-shaking即打包构建过程中移除没有被引用的代码(tree-shaking最早基于ES6打包工具Rollup中，webpack3自带功能)
4. 更好的Typescript支持，地球人都知道的在vue2中使用typescript实在不是很容易，即便结合成功也有一些小问题很难处理，而尤老师在视频中也直呼本次更改解决了vue2在很难在大型前端项目开发中使用的蹩脚问题，当然在vue3中使用了typescript还是需要使用者花费不少时间去学习(vue3中使用typescript可以选择defineComponent或者class模式，class模式才是typescript原本长相)
5. vue3进行了Virtual DOM 重构(vue2中更新时会遍历整个组件，如果组件很大，则遍历消耗就随之增大)，添加patch flag优化静态树（具体内容自己操作操作看一下编译后的内容）
6. 删除filter过滤器，建议调用方法或计算属性替代filter
7. 全局方法添加方法替换，vue2中使用Vue.property.xxx添加全局方法到this，而vue3则使用config.globalProperties.xxx添加
8. 实例化由vue中中new Vue替换成vue3的createApp
9. 新增vite创建项目，其实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间
10. 图形化界面创建项目 vue ui
11. 修改vue2中只支持单一根节点，vue3中可以使用多个根节点
12. setup函数。一个全新的属性 setup ，这是一个组件的入口，让我们可以运用 Vue3.0 暴露的新接口，它运行在组件被实例化时候，props 属性被定义之后，实际上等价于 Vue2.0 版本的 beforeCreate 和 Created 这两个生命周期，setup 返回的是一个对象，里面的所有被返回的属性值，都会被合并到 Vue2.0 的 render 渲染函数里面，在单文件组件中，它将配合 模板的内容，完成 Model 到 View 之间的绑定，在未来版本中应该还会支持返回 JSX 代码片段。setup 函数 beforeCreate 之后 created 之前执行,即 vue 实例刚刚创建，没有 this，啥都没有.
13. 新增ref reactive实现响应式，ref处理常规类型数据，reactive可处理所有类型数据响应式(个人感觉还是有点不方便，比较麻烦，各种不同需要多敲敲代码自己感悟)
14. 在此之前vue3的版本并未稳定，相关生态也并未完善，已有的vue3组件库也只有vant3已发布beta版本，element-plus也是beta，element3还正在开发.