vue vue-router vuex

vuex

• vuex数据存取流程

  1. 用户调用一个action
  2. 该action加载/计算数据
  3. 该action提交一个mutation
  4. state 被更新
  5. getter 将更新后的state返回给组件
  6. 组件被更新

• vuex模块使用流程

  1. 设置Vue组件，使用生命周期钩子,比如created方法
  2. 分发加载动作actions,this.$store.dispatch
  3. 将数据添加到组件，比如computed属性
  4. vue组件数据显示

• vue/router/vuex

  • vue文件发送动作 -> vuex的actions -> 前端API提交到后端API -> 接收返回结果到Vuex -> Vuex状态更新重新加载

vue-router

• vue-Router导航守卫
  • 在导航改变过程中通过对跳转进行取消或改变来对路由改变进行保护
  • 加载用户状态action后监听状态，加载完毕直接执行路由守卫函数
  • requireAuth(to, from, next)
    • 要来/去的路由from/to对象，next函数，执行效果依赖next方法的调用参数（类似重载）
    • 调用next方法，确保钩子被resolved
  • 使用流程
    1. 构建守卫函数
    2. 通过Vue存储器获取用户状态，store.watch第一个参数只接受函数
    3. 在指定路由中使用导航守卫

vue

• data内数据属性，通常是用于变迁

• computed属性对象，简单逻辑计算

• watch属性可以监听计算,数据属性值前后的变化，有变化则触发相应的回调，ux（用户体验)而给出的通知信息

• 事件数据总线，监听$on与触发$emit 与nodejs的事件模块一脉相承

• 通过vue组件实现单页面无跳转登录,登录登出session操作与Auth门面相关

• Vuex.Store实例方法

  • watch(fn: Function, callback: Function, options?: Object): Function
  • 响应式地侦听 fn 的返回值，当值改变时调用回调函数

• web端文件上传FieldList对象 files[0]

• vuex可单独一模块专为前端数据逻辑模型，不需要每个vuex模块与后端对齐

• 单条数据用对象，多条则是js简单对象数组

• array.sort

  • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  • 若 a 等于 b，则返回 0。
  • 若 a 大于 b，则返回一个大于 0 的值。

• 多条件展示思路

  • 每个条件显示为一个过滤器,组合使用
  • 以混入的形式将过滤器方法注入组件中mixins

• 前端js节流

  • debounce 下划线js库
  • vue-router路由元信息，给每一个路由meta对象打标签

• vue前后端分离整体开发流程

  1. 数据表
  2. 后端路由及API
  3. 中间件/授权类/请求类
  4. 控制器
  5. 模型类/Service/unitiy
  6. 前端路由Vue-ruter及API
  7. 前端页面/组件
  8. Vuex模块

合规

• 当数据量过大，前后端数据过滤就很有必要，前端mixins模块
• 控制器的内http操作方法，以http谓词前缀作为相应的方法命名前缀
• 从vuex中获取应用于实现功能的对应值状态，通常用计算属性来提供，而其ux（用户体验）特性，用watch属性来通知
• vue的计算属性本质上是一个组合属性，而watch属性则是一个监视追踪属性，会比较上一次与本次的值变化。
• 将过滤器与过滤结果分开，要用的地方负责监听事件，发生的地方专注于触发
• service 通常放公共的商业性代码; unitility则是基础设施，如与第三方交涉的代码
• 审核记录(获取数据->执行变更->通过审核)
  • 通常将审核前后的信息(比如用json_encode)序列化，存入一个记录字段，以便后续审核通过,使用审核前的请求数据或比对
  • 而拒绝动作审核，则只需要将动作标记为审核不通过即可
  • 通过中间件来控制用户对网站API接口的访问请求
• Vuex支持动态加载Vuex模块
  • created 加载vuex派发初始数据
  • computed 合成读取vuex数据
  • watch 状态改变，通过事件数据总线，通知其它组件
  • method 组件内部处理逻辑，及模板相关事件
  • 将vuex数据对象同步到本地数据模型的概念,状态，模型/事件数据总线
  • 需要频繁与后台交互的数据，不适宜用vuex比如搜索数据

核心原理

• task vs microtask
  • 根据 HTML Standard，在每个 task 运行完以后，UI 都会重渲染
  • 使用setTimeout，会在task尾部推入这个函数
  • Promise，MutationObserver，setTimeout 优先级由高到低
  • 在 microtask 中就完成数据更新，当前 task 结束就可以得到最新的 UI
  • vuejs 响应式触发顺序 setter->Dep->Watcher->update->patch