需求初衷

后台老大用小幺鸡码文档很不爽，要一个一个往上去写。他想搞个工具从后台生成 json。但是不能都看 json 字符串去，要能看到层级结构，还要能偶尔的改动一下。就花了几天时间做了个接口管理系统。这个是主要的新增编辑详情页面组件。

注

需求初衷: 在一个餐饮项目中，有一个需求是员工吃饭需要自动扫脸识别出员工信息，员工点菜确认后出菜。并记录员工用餐信息。

注意问题: 在 chrome 46 之后，getUserMedia 只能在 localhost，https 中使用。解决方法有三种

1. 使用 chrome 46 之前的浏览器
2. 使用 https
3. 给浏览器设置 unsafely-treat-insecure-origin-as-secure, 具体方法打开 chrome 在地址栏填入 chrome://flags 回车进入后查询 unsafely-treat-insecure-origin-as-secure，查询到后设置为 Enadled 并在方框中填写访问的地址重启。

从 Hexo 到初入 vuepress

# 为什么放弃了 hexo 转入 vuepress

1. hexo 太老了，感觉是就是 jq 和 vue、react... 的关系
2. 自己本身用了挺长时间 vue，对 vue 生态圈的新成员有点点渴望。在 md 里面写 vue，想想就销魂
3. 用官方的话说

   Hexo 一直驱动着 Vue 的文档 —— 事实上，在把我们的主站从 Hexo 迁移到 VuePress 之前，我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互，同时，Hexo 的 Markdown 渲染的配置也不是最灵活的。

问题原因及优化方案

问题原因：

1. 产品初期没有考虑到商品数据量会有这么大，做的前端模糊查询，没用后台查询。
2. 大量的重复 DOM 节点渲染
3. vue 对 data 的监听

优化方案：

1. 默认只显示 200 条数据，用户在搜索查询时使用接口插后台
2. 通过选中商品后，把商品的遍历集合改变为只有当前一条商品的集合，这样一条商品就只有 1 个 DOM 节点
3. 冻结对象或者不在 Data 中放入拿回来的商品数据