认识 Vue

组件结构

从项目文件结构看，Vue应用实际就是一颗组件树。组件的内容包含html、javascript、css等。如何控制组件的外观和内在逻辑？组件有属性、生命周期、方法事件、渲染，通过指令赋予组件业务逻辑对外部事件产生响应。

组件必须先注册后使用，考虑到组件命名泛滥问题，局部注册是个不二选择。首先考虑组件属性的命名问题，建议组件名使用Pascal，属性和方法使用camelCase，在父组件使用中，属性和方法名会对kebab-case自动转换。除此之外，属性瀑布也存在问题：下层组件如果想获得上层组件数据，需要层层传递。通过依赖注入倒是可以打破僵局。

尽管通过瀑布流组件间能单向传递数据，但面对多个组件公用相同状态时束手无策。状态管理发挥重要作用，内部的reactiveAPI或者Pinia支持多个组件共享状态。

vue开发方式有两种，组合式和选项式。相比较组合式更容易让人理解。除此外，vue的使用方式多种多样，支持桌面开发、移动端等多种终端部署。

vue汇集很多优秀想法，如：组件式开发复用代码，响应式对象自动追踪依赖变化，虚拟DOM树的高效渲染机制等。页面开发不必关注底层的DOM结构，专心处理业务交互。理解响应式尤为重要，如果简单点可把响应式想成通知/订阅模式。通过Getter/Setter或Proxies劫持对象访问，实现追踪和触发副作用。

渲染机制将响应式更新作用于虚拟DOM，通过对比实现局部更新实际DOM。

渲染管线

javascript函数式编程

函数式编程令习惯OOP的程序员抓耳挠腮。从语义上看，函数式编程强调行为过程，而面向对象强调对象实体。
闭包经常被提起，与数值无异，能作为参数传递、能作为值赋值变量、能作为结果返回。闭包的实质：函数内包含函数，内部函数捕获作用域内的自由变量，从外部函数中return返回实现“越狱”，供以后使用。（underscore库对函数式编程提供许多支持）

高阶函数是参数和返回值都是函数的函数。让抽象、多态以函数组合的方式优雅展现。

// 处理函数参数null，使用默认值替代
function  fnull(fun /*, defaults*/) {
  var defaults = _.rest(arguments);
  return function(/*arguments*/) {
      var  args = _.map(arguments, function(e, i) {
          return existy(e)?e:defaults[i];
      })
    return fun.apply(null, args)
   }
}

组件

快速开发基本使用现成的组件，坚决不重复造轮子。ElementPlus 提供丰富的通用组件，实际使用只要微调样式，如：了解它的布局，自适应CSS等。

路由是组件配合的粘合剂。单页面应用需要 router-link, router-view 实现动态渲染组件。内容包含动态路由、嵌套路由、路径匹配、参数传递、组合式API。

路由控制组件如何显示，那如何解决旁系亲属组件之间的同步呢？如果采用之前的属性瀑布流，就要从公共祖先节点向下逐层传递，工作繁琐。通过Pina共享状态管理，就能打破这个障碍。

前端主要职责是显示终端，通过网络请求与后端交互完成业务。axios基于promise的网络库，以 promise api 形式支持Http请求以及拦截器，重点是它的响应结构和请求配置。