用工具完成任务 ≠ 了解工具。

随着时代演进，大部分的公司都采用框架来加速开发效率；自从有了框架，工程师可以更轻松，并且在更短的时间完成专案。

尽管做事的效率提高了，但因为许多核心概念已经被框架取代，导致部分开发人员做得出来功能，却无法解释怎麽做出来的。

大纲

1. 了解文章结构，快速掌握面试技巧

   • 1.1 文章结构
   • 1.2 为什麽用这种角度分享面试经验？

2. 请说明你现在专案用到的前端框架

   • 2.1 面试官为什麽会问？
   • 2.2 面试官想从答案确认什麽？
   • 2.3 笔者提供的简答
   • 2.4 [小提醒]简答的好处

3. 回答问题所需具备的知识

   • 3.1 Vue.js
   • 3.2 Vuex
   • 3.3 Vuetify
   • 3.4 Nuxt.js

4. 衍伸问题

   • 4.1 在 Vue 框架中，watch 跟 computed 的差异及使用时机
   • 4.2 在 Vue 框架中，computed 跟 method 的差异及使用时机
   • 4.3 有使用过 React 吗？为什麽会选用 Vue 开发呢？

1. 了解文章结构，快速掌握面试技巧

1.1 文章结构

从今天开始，我会分享面试官常问的问题；文章会以下面的结构呈现：

• 面试官为什麽会问？
  主要分成 5 个方向与读者分享出题逻辑
  • 履历资讯
  • 职缺所需具备的技术
  • 常见面试题
  • 工作相关问题
  • 人格特质
• 面试官想从答案确认什麽？
  • 技术面
    用考题判断你是否真的掌握这门技术。
  • 经历面
    用追问细节的方式核实你经历的真实性。
  • 人格特质
    面对各种问题的应对进退是否符合公司需求。
• 笔者提供的简答
  笔者会附上自己在面对问题时的答覆，这块仅供参考。
• 回答问题所需具备的知识（技术考题）
  笔者会统整问题涉及的知识面，让读者不会知其然而不知其所以然。
• 衍伸问题
  大部分的面试官会根据你的回答，询问他们想知道的细节；所以我也会分享从这个问题出发的衍伸问题。

1.2 为什麽用这种角度分享面试经验？

就算同为全端工程师，每个人的技能树也都略有不同；这个系列文不是为了猜题而写，而是希望读者可以透过它了解面试官出题逻辑、自己答题方向；如果可以，你也可以参考笔者的文章架构，做出属於自己的面试攻略，建议先把知识面整理完，再用自己的口吻整理答案。

网路的解答未必都是正确的，在整理的过程你甚至会发现部分逻辑互相冲突；如果未经思考直接照抄，你会连错误的知识一起吸收。

2. 请说明你现在专案用到的前端框架

2.1 面试官为什麽会问？

因为履历资讯中表明面试者具备前端（Frontend）的技能：

• Nuxt.js：Vue.js & Vuetify & Vuex
• HTML5、CSS、JavaScript

其中Nuxt.js：Vue.js & Vuetify & Vuex都是框架，面试官想知道你对这些框架了解的深度。

2.2 面试官想从答案确认什麽？

• 想看你能否解释这些前端框架的关联性
• 如果要你单纯解释某个框架的功能，你是否能应对
• 如果能说出这些框架解决了哪些问题更好

2.3 笔者提供的简答

目前使用 Nuxt.js 这个 Vue.js 的应用框架，并使用 Vuetify 提供的 UI Component 来设计版型；同时利用 Vuex 来管理 Vue 框架下的全域变数让传值更加直觉。

2.4 [小提醒]简答的好处

你的简答必须包含关键字，并尽量控制回答时间最多不超过 1 分钟。

• 简答的好处
  • 面试官会依照自己感兴趣的技术深入询问。
  • 因为回答的时间短，如果你的回答面试官不满意，这也只是一个小桥段。
  • 双方有来有往，营造出同事间的交流感。
• 详答可能的坏处
  • 如果超级详尽的解答每个问题，整场面试会变成只有你在说。
  • 万一你回答的方向跟面试官期待不符，你就会在错误的道路越走越远还不知道要停下来。

3. 回答问题所需具备的知识

3.1 Vue.js

一个优秀的 JavaScript 框架

• 过去只有 JavaScript、HTML、CSS 时有什麽问题？
  • 难以维护
    专案结构庞大时，JavaScript、HTML、CSS 维护难度会成几何式上升，各式各样的逻辑都集中在 JavaScript 里面导致程序可读性极低。
  • 效能低落
    如果 JavaScript 频繁操作 DOM 元素，会不断触发 Reflow & Repaint 的流程，页面重复渲染的过程会消耗大量效能。
• 框架的优势
  • 资料与 UI 分离
    过去 JavaScript 要动态的去更新 DOM 来塞入资料，但框架透过资料双向绑定，工程师可以专注处理资料的逻辑面。
  • 模组化的 UI
    一个网站会有许多重复出现的元素（按钮、表单、表格…），在框架中可以将这些常用的元素设计成 Component，要使用时再根据实际需求填入资料及参数即可，大幅提升工程师理解与维护的能力。
  • 更好的效能
    采取 Virtual DOM 概念，当资料变动时先计算好要变动的地方，以此抵销无意义的变更，并且重复使用已存在的 DOM 元素。

3.2 Vuex

• Vue 过去传值时面临什麽问题？
  过去 Vue 里面 Component 的参数传递都是采用 emit 跟 props ，但如果 Component 的关系并非 parent/child 而是像下图想要将 Component B 的资讯传到 Component C ，这种操作不但需要很多 emit 跟 props，还会造成程序码阅读困难。
  
• 如何解决这个问题？
  根据这个问题，官方推出专门用来「状态管理」的工具，你可以把它想像成 Vue 里面的全域变数，将状态（state）全部放在仓库（store）来进行管理。
  
  • 更新 state
    在 Vuex 里面，储存状态的为 State，当 Component 需要更动 State 时，需要透过 Actions 发出一个 Commit 去呼叫 Mutations，再由 Mutations 去更改 State。
  • 取得 state
    而 Component 的资料更新，可以在 computed 里面使用 mapGetters 的 function，或是用 mapState 直接取用 state 的资料。

3.3 Vuetify

• 提供前端工程师丰富的 MD Component
  你可以把 Vuetify 当成 Vue 的 Material Design Framework，他不但省去了你自己手工打造 UI Component 的时间，还为每个 Component 提供许多可以自由定义的 property 让版型更加灵活。
• 强大的社群支持并稳定更新
  截至今天在 Github 上有高达 30K 的星星，如果你在开发上遇到问题，在他们 discord 社区上发问也能很快得到解答。
  
  官方每个礼拜都会稳定更新版本，相比於其他 Vue 的 Framework 是非常稳定的。
  
• 自由决定导入的 Component
  官方称为 Auto treeshaking，在使用 Vuetify 时你可能觉得他非常「肥」，里面包了一堆你专案中用不到的 Component，但因为有 Auto treeshaking 的机制，所以只会导入你有使用的 Component。

3.4 Nuxt.js

• Vue.js 的应用框架
  把 Webpack、Vue loader、Vuex、Router 的设定都集中在一起，减少使用者的配置成本。
• SSR 服务器端渲染
  由 Server 端组成 HTML 後回传，这样的做法让 Google 在 SEO 解析时可以很好的分析 DOM 元素，藉此提升网站的 SEO 水平。

  备注： Nuxt.js 也是能做 SPA（无 SSR），或产生静态网页。

4. 衍伸问题

大部分的面试官在听完你的简答後，会以此为基础做深入的询问；如果要你深入介绍每个框架的职责，你可以参考「3. 回答问题所需具备的知识」来回答；除此之外，下面笔者再分享几个常见的衍伸问题。

4.1 在 Vue 框架中，watch 跟 computed 的差异及使用时机

考点：确认是否掌握框架基础知识

watch 与 computed 都在观察「值」的变动：

• computed
  有「快取」的特性，根据依赖值的变化去计算一个结果（多对一）。
• watch
  支援「非同步」，监听一个值的变化去做一系列的事情（一对多）。

4.2 在 Vue 框架中，computed 跟 method 的差异及使用时机

考点：确认是否掌握框架基础知识

• computed
  有些复杂逻辑的运算会花很多时间；但靠着「快取」的特性，只要依赖的「值」没有改变，它就不需重新运算，以此节省效能。
• method
  只要被呼叫，它每次都会执行，就算这些执行结果是相同的；适用於「不需要快取」的计算。

4.3 有使用过 React 吗？为什麽会选用 Vue 开发呢？

考点：你是否了解或是曾经用过同类型的技术，以及现在专案框架选择的理由

因为前辈先将 Vue 导入公司的专案，所以我是先学习 Vue 来开发网页前端；对有接触过 JavaScript 的工程师来说，Vue 算是一个可以快速上手的框架。

我个人在业余时间有使用 React Native 来撰写 App，因此觉得如果熟悉 Vue，React 的学习曲线不会太过困难；两者都是优秀的前端框架，主要还是看团队成员对哪个比较熟悉。

读者可以透过以上几个前端框架的问题，初步了解面试官出题逻辑，以及答题方向。

感谢大家的阅读，如果喜欢我的文章可以订阅接收通知；如果有帮助到你，按Like可以让我更有写文的动力，我们明天见～

参考资源：

1. 5 分钟带你搞懂 Vue、Vuex、Vuetify、Nuxt.js 之间的关系(笔者部落格)
2. Vuex 是什麽? 怎麽用?
3. 前端框架的功能与优点

我在 Medium 平台 也分享了许多技术文章
❝ 主题涵盖「MIS & DEVOPS、资料库、前端、後端、MICROSFT 365、GOOGLE 云端应用、自我修炼」希望可以帮助遇到相同问题、想自我成长的人。❞