Vue3以新特性一马当先typescript

vue3出来几个月了，项目成功使用defineComponent和class两种模式踩坑，已经上线。我有空整理一下大概的变化和一些心得。因为已经成功踩坑应该比较全面了。vue3.0的新特性如下：1、vue3使用ES6中的Proxy替代vue2中的Objest.defineProperty。原因是Objest.defineProperty只是被监控对象中的每一个属性，而Proxy是代理的整个对象，这也是vue3这次改动的最大亮点之一（具体实现建议手动挖掘二）这个。$set(this.param,'c','西门庆')//vue2这段代码在vue2里应该很熟悉，在vue3里就不是了。2.Vue3这次采用了compositionAPI（组合API）模式，所有的代码都在setup中返回，而vue2中使用的是OptionsAPI（这个特性的改变其实是改变开发者的习惯，从规范的开发vue2的template到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进行了VirtualDOM重构（vue2更新时会遍历整个组件，如果组件比较大，则遍历消耗会跟着增加），添加patchflag优化静态树（具体内容自己操作看编译后的内容）6.删除filterfilter，建议调用方法或者计算属性替换filter7，全局方法添加方法替换，vue2中使用Vue.property.xxx给this添加全局方法，vue3使用config.globalProperties.xxx添加8，vue实例化用vue3的createApp9替换newvue，添加vite创建项目，实现原理是利用ES6import的特性发送请求加载文件，拦截这些请求，做一些预编译，省去冗长的打包webpack10时，图形界面创建项目vueui11，修改vue2只支持单根节点，vue3可以使用多根节点12.setup函数是一个全新的属性setup，它是一个组件的入口，让我们可以使用Vue3.0暴露的新接口，在组件实例化的时候运行，定义了props属性后，其实是等价的到Vue2.0版本中的beforeCreate和Created这两个生命周期。setup返回一个对象，里面所有返回的属性值都会合并到Vue2.0中。render渲染函数中，在单文件组件中，会配合模板的内容完成Model和View的绑定，未来版本应该也会支持返回JSX代码片段。setup函数是在Create之前和created之前执行的，也就是vue实例刚刚被创建，没有这个，什么都没有。13.新增refreactive实现responsive，ref处理常规类型的数据，reactive可以处理所有类型的数据responsive（个人感觉还是有点不方便和繁琐，需要多敲代码才能理解各种不同）14、之前vue3版本不稳定，相关生态不完善。现有的vue3组件库只是vant3的测试版。element-plus也是测试版，element3还在开发中。