Vue学习笔记一 基础学习

Ruoyi-Vue

  1. 虚拟DOM 按照我的理解，浏览器是先分析html节点，然后构建成，一个DOM树，然后解析CSS文件和html节点上我们写的样式信息，生成一个样式表，最后将DOM树和样式表关联起来构建成一个Render树，每个DOM都有attach方法，接受样式信息，返回一个render对象，根据这些对象构建成一个Render树，然后浏览器根据Render树绘制出页面出来。但是这不是严格的，这三种是一种异步交叉的关系。这个就是整个一个正常流程. 在很老的开发中，在每次操作DOM树时，每操作一次就会走一遍上一段的流程，如果操作十次就会更新十次，所以这个是很难受的，所以虚拟DOM就是为了解决这个问题而设计出来的，如果在虚拟dom中操作十次，他不会更新十次，而是会将10次的更新保存到一个本地js对象中，然后再一次更新到（attach）到DOM树上。故而页面的更新都会记录在本地的js对象中，操作内存中的js对象明显比更新十次要快得多，更新快结束时直接映射成真实DOM然后再由浏览器绘制。
  2. 文件夹常规结构
    • .eslinttrc.js: 有个东西叫做eslint，这个就是eslint的配置文件，他是一个代码检查工具，用来检查你写的代码是不是规范的，这个东西在每个公司里面是不同滴！！!
    • babel.config.js: 这个是另一个工具叫做Babel的配置文件，因为在前端中存在es6，es7等等的语法，但是你得考虑一下，我们有很多的浏览器，比如Google的Chorme，巨硬的Edge，还有火狐的Firfox，手机上开发的更多了，这个工具就是一个js编译器，用来把你写的代码转换为浏览器兼容的语法。
    • public：这个目录包含一些Webpack编译过程中没有加工处理过的文件，比如favicon.ico（项目图标）和index.html（这个是Vue应用来运行的模版文件，有点像Java中main函数的感觉）
    • src：这不用说，这就是核心代码目录.
  3. 生命周期钩子 每个Vue组建在创建的时候都需要初始化，比如会进行数据监听和编译模版，更新DOM等等吧啦吧啦，这些动作就可以视为是生命周期钩子的函数，按照我的理解，有点类似页面上某个小块创建时，暴露出的几个api，通过这些api实现某些必须的操作。 Vue生命周期图示： 按照上面的图示所示，主要分成了五个生命周期