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优化静态树(具体内容自己操作操作看一下编译后的内容)vue3引路_第1张图片
  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还正在开发.

你可能感兴趣的