【vue.js 3.0】

文章输出：【拉勾教育Java高薪训练营 】 

•  学习体会

学习拉钩前端课程有近3个多月的时间了，每天给自己安排2个多小时的视频任务，边看视频，边看笔记，最后进行实操训练。在这个过程中，最艰难的任务就是最后的作业题。感觉每次的作业难度好大啊，作业特别具有综合性，几乎涵盖了一个章节的知识点。不得不说，作业很具有挑战性。我的前端底子不是很强，做作业总是遇到很多困难和阻碍，不是项目发布失败，就是卡到一个问题上了，不过最后通过老师的帮助和自己的努力解决了问题，心里还是蛮有成就感的。剩下还有3个月的时间，我感觉我的技术会有更大的提升。

• 课程评价

拉钩前端设计的课程真的是太符合市场的需求了，对于每个章节的设计也很有逻辑性，视频也很简短，内容浓缩到精华。在项目实操的过程中，老师也很耐心帮助我解决问题。我特别感谢小峰老师和圈圈老师对我的帮助。

• 收获

对于有4年前端经验的我来说，学了近一半的课程，感觉比我工作接触的内容还多，而且我所学到的内容都是现在市场上所需要的技能，这个课程对我的技能给予了很大的提升，对我马上跳槽也有了很大的自信。报名前，我觉得网上有很多的免费课程可以学，所以很犹豫要不要花钱报这个课程，但是我整体看了这个课程体系，感觉很不错，现在学了一半，我感觉这个课程很值，不仅仅是对课程内容的满意，还有整个拉钩老师团队的满意。我觉得单打独斗到高手，需要走很多弯路，而遇到贵人帮自己的话，进阶就会很快。

vue 2.x 和 vue 3.0 的区别

• 源码组织方式的变化 （用 typeScript）
• Composition API  （为了解决大型项目遇到超大组件使用 options api不好拆分和重用的问题）
• 性能提升（重写响应式的代码、重写虚拟 dom ，从而对渲染 update 有了大幅度的提升，服务端渲染的速度也提高了2-3倍）
• Vite （此开发工具可以测试时不用打包，可以直接运行测试项目，提升开发效率）

源码组织方式 

• 源码采用 TypeScript 重写
• 使用 Monorepo 管理项目结构 

  

不同的构建版本 

• packages/vue

  

  

  

• cjs 是运行 vue （开发版：压缩；生产版本：无压缩）
• global 是 全局构建
• browser 是导入模块
• bundler 是打包代码

  Composition API （vue 3.0）&& options API （vue 2.x）

• 官方文档参考
  •  RFC（Request For Commonents）https://github.com/vuejs/rfcs
  • Composition API RFC 
• options API 设计动机
  • options API
    • 包含一个描述组件选项（data、methods、props等）的 对象
    • Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项 
  •  options API Demo 

    

•  Composition API 设计动机
  • Vue.js 3.0 新增的一组 API
  • 一组基于函数的 API
  • 可以更灵活的组织组件的逻辑
  •  Composition API Demo

    

性能提升 

• 响应式系统升级
  • vue.js 2.x 中响应式系统的核心 defineProperty
  • vue.js 3.0 中使用 Proxy 对象重写响应式系统
    • 可以监听动态新增的属性
    • 可以监听删除的属性
    • 可以监听数组的索引和 length 属性
• 编译优化
  • vue.js 2.x 中通过标记静态根节点，优化 diff 的过程
  • vue.js 3.0 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点内容
    • Fragments （升级 vetur 插件）
    • 静态提升
    • patch flag
    • 缓存事件处理函数

• 源码体积的优化 
  • vue.js 3.0 中移除了一些不常用的 API
    • 例如：inline-template、filter 等
  •  Tree-shaking

  Vite

•  ES Module
  • 现代浏览器都支持 ES Module （IE 不支持）
  • 通过下面的方式加载模块
    • <script type="module" src="..."></script>
  • 支持模块的 script 默认延迟加载
    • 类似于 script 标签设置 defer
    • 在文档解析完成后，触发 DOMContentLoaded时间前执行 
• Vite as Vue-Cli
  • Vite 在开发模式下不需要打包可以直接运行
  • Vite 在生产环境下使用 Rollup 打包
    • 基于 ES Module 的方式打包
  • Vue-Cli 开发模式下必须对项目打包才可以运行 
  • Vue-Cli 使用 Webpack 打包
• Vite 特点
  • 快速冷启动
  • 按需编译
  • 模块热更新 
•  Vite 创建项目使用
  • Vite 创建项目

    

  • 基于模板创建项目