20230724----重返学习-vue3知乎日报项目实战

day-119-one-hundred-and-nineteen-20230724-vue3知乎日报项目实战

vue3项目实战-知乎日报

主要问题

  • pinia 和 vuex4 的区别

  • @vue/clivite的区别

    • @vue/cli脚手架的底层核心是webpack
    • vite脚手架
      • 开发环境:基于ESModule模块规范处理的
      • 生产环境:基于轻量级的 rollup 打包工具处理
    • 目前我做 Vue3/React的项目,都是基于 vite脚手架来处理的,主要原因:vite 处理的速度要比 webpack 快很多,而且 webpack支持的一些生态插件,目前 vite 大部分也都支持了(或者提供了相应的解决方案)!但是因为 vite 处理兼容比较麻烦,所以我只用于Vue3这样的项目,不再考虑IE低版本浏览器的兼容。
    • 开发环境下vite要比webpack方式快很多很多(大概10~100倍),主要因为:即便开发环境下,基于webpck处理,也需要对代码按照规则进行编译,把编译后的内容进行预览,项目如果比较大,冷启动需要的时间也会很久(扩展:如何加快webpack编译和打包的速度);但是vite就不会,因为开发环境下,它根本不会对代码进行编译,基于原生的ESModule规范,在项目预览的时候,实现模块之间的依赖导入(但是对于一些少量的插件,也需要编译,例如:less
    • 但是vite在生产环境下,也需要对代码进行打包编译,只不过不是用webpack,而是使用了更轻量级的rollup
      • 整体编译的速度会比webpack快一些「自己私下搜索几条rollup打包快的原因」
      • 但是rollup的生态是不如webpack完善的,对于一些特殊的打包诉求,可能rollup处理不了「常规的基本都支持」
  • Vue3 和 Vue2 的区别

    • 两三年前,尤雨溪在B站开Vue3发布会的时候,我全程跟着听过,再结合这两年的运用,大概总结了以下几点区别:
    • 从底层机制上来讲:
      • Vue3 重写了DOM-diff算法,只比较动态节点,跳过静态节点,大大提高了视图编译的速度。相比较于Vue2,性能提高了 1.3~2倍。–> 扩展:diff算法
      • 利用了webpack中的tree shaking 机制,只打包用到的模块-按需打包,降低了打包后文件体积。
      • 响应式操作原理,放弃了Vue2中的Object.defineProperty(),采用ES6新增的Proxy进行数据劫持,所以不兼容IE浏览器。–> 扩展:vue2响应式原理vue3响应式原理
        • 使用Proxy的好处:
          • 更加方便:不用区分数组和对象,都基于Proxy做处理即可。
          • 性能更高:无需迭代对象每一项分别做劫持,直接对整个对象做劫持即可。
          • 功能更强:除了传统的get/set劫持,还劫持deleteProperty/defineProperty/has/ownKeys等更多的劫持方式!
      • Vue3还具备了一些Vue2没有的新特性:
        • 支持传送门组件
        • 支持异步组件。–> 使用方法,与骨架屏懒加载的联系。
        • 更好地支持TypeScript
        • 基于Custom Renderer API(自定义渲染 API),可以更好地进行图形绘制,可兼容小程序之类的。
    • 从语法上来讲:
      • Vue3 几乎完全兼容Vue2的语法,只不过不再具备Vue这个类(每个组件也不再是Vue的子类组件中的this也不再是Vue的实例),把之前Vue.prototype上的属性方法,作为this私有的属性方法
      • 只不过Vue3也提供了几乎完全不同于Vue2的语法(推荐使用新语法)
        • 基于Compsition API(聚合式API)替代Options API(配置项式API),所有代码都写在setup函数(或者

你可能感兴趣的:(重返学习,vue,学习)