先回想一下在沒有框架的時候，開發者的日常會長什麼樣子吧。
那時最流行的「套件」非 jQuery 莫屬了，語法簡潔、直覺好用的元素選取器，語法便捷的事件監聽註冊，豐富的開發者生態系產出大量的開源套件，以及最重要的，弭平瀏覽器 XHR 差異的 ajax 函式，將複雜的瀏覽器差異藏在套件中，讓開發者只需要專注在想實作的邏輯即可。
透過好用的元素選取器及事件監聽，開發者們可以依據使用者的行為，靈活操作 DOM 元素的結構及樣式，jQuery 的這些特色直到 2019 的現在，都仍是很實用的功能，甚至 程式碼本身 也有許多值得開發者學習的地方；但隨著專案規模逐漸增大，程式複雜度不斷上升，直接操作 DOM 的缺點也就逐漸浮出檯面：
難以維護
HTML、CSS、JavaScript 無法維持原先的各司其職，因為需要透過 JavaScript 處理互動內容，勢必要將結構、樣式寫到 JavaScript 的部份中，也就因此造成架構耦合度提高，程式碼管理困難。
效能低落
在 Reflow 及 Repaint 是什麼？ 中有提到 Render Tree 的概念，當 DOM 被改變，勢必要觸發整個 Reflow & Repaint 的流程，頻繁的改動觸發重複渲染，便會讓頁面效能被消耗殆盡。
框架的功能
既然有前述的問題，自然會有強者試圖解決它。歷史進程中有許多大神拋出了方法論，或是實作出解決方案，但這中間的歷史礙於篇幅，就容筆者簡略帶過吧。總之，現今的「框架」其實就是一種提升開發效率、降低維護難度的開發架構。主流的框架如 React、Vue 等，大都擁有這些特性：
問題一：構建的vue-cli 工程都到了哪些技術，它們的作用分別是什麼？
1、vue.js：vue-cli工程的核心，主要特點是 雙向數據綁定 和 組件系統。
2、vue-router：vue官方推薦使用的路由框架。
3、vuex：專為 Vue.js 應用項目開發的狀態管理器，主要用於維護vue組件間共用的一些 變量 和 方法。
4、axios（ 或者 fetch 、ajax ）：用於發起 GET 、或 POST 等 http請求，基於 Promise 設計。
5、webpack：模塊加載和vue-cli工程打包器。
問題二：vue-cli 工程常用的npm 命令有哪些？
下載 node_modules 資源包的命令：
npm install
啟動 vue-cli 開發環境的 npm命令：
npm run dev
vue-cli 生成 生產環境部署資源 的 npm命令：
npm run build
用於查看 vue-cli 生產環境部署資源文件大小的 npm命令：
npm run build --report
問題三：請說出vue-cli工程中每個文件夾和文件的用處
build 文件夾：用於存放 webpack 相關配置和腳本。開發中僅 偶爾使用 到此文件夾下 webpack.base.conf.js 用於配置 less、sass等css預編譯庫，或者配置一下 UI 庫。
config 文件夾：主要存放配置文件，用於區分開發環境、線上環境的不同。
常用到此文件夾下 config.js 配置開發環境的 端口號、是否開啟熱加載 或者 設置生產環境的靜態資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
dist 文件夾：默認 npm run build 命令打包生成的靜態資源文件，用於生產部署。
node_modules：存放npm命令下載的開發環境和生產環境的依賴包。
src: 存放項目源碼及需要引用的資源文件。
src下assets：存放項目中需要用到的資源文件，css、js、images等。
src下componets：存放vue開發中一些公共組件：header.vue、footer.vue等。
src下emit：自己配置的vue集中式事件管理機制。
src下router：vue-router vue路由的配置文件。
src下service：自己配置的vue請求後台接口方法。
src下page：存在vue頁面組件的文件夾。
src下util：存放vue開發過程中一些公共的.js方法。
src下vuex：存放 vuex 為vue專門開發的狀態管理器。
src下app.vue：使用標籤<route-view></router-view>渲染整個工程的.vue組件。
src下main.js：vue-cli工程的入口文件。
index.html：設置項目的一些meta頭信息和提供<div id="app"></div>用於掛載 vue 節點。
package.json：用於 node_modules資源部 和 啟動、打包項目的 npm 命令管理。
問題四. 什麼是 MVVM？
MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設計思想。 Model 層代表數據模式，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化爲 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。
問題五. 父組件向子組件傳值的方法？
父組件傳遞的數據子組件用 props 方法接收。
子組件通過兩種方式接收：可以傳遞任何類型（數組，對象，各種數據類型等等）
*props:[‘title’,‘likes’,‘isPublished’,‘author’]；
*props:{title:String,likes:Number}
詳細介紹看這篇：Vue 父組件向子組件傳值
https://blog.csdn.net/qq_34928693/article/details/80539350
問題六. 子組件向父組件傳值的方法？
子組件向父組件傳值用this.$emit(key,value) ，父組件接收的時候需要在父組件中創建的子組件的標籤中綁定Key，格式:@Key=“方法名”，父組件聲明這個方法，方法帶參數，這個參數就是子組件傳遞的Value。
詳細介紹看這篇：Vue 子組件向父組件傳值
https://blog.csdn.net/sisi_chen/article/details/81635216
問題七. Vuex 是什麼？哪種功能場景使用它？
Vuex 是專門爲 Vue.js 設計的狀態管理模式，它採用集中式儲存管理 Vue 應用中所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
當項目龐大的時候使用它：
*需要動態的註冊響應式數據；
*需要命名空間 namespace 來管理組織我們的數據；
*希望通過插件，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。
問題八. Vuex 有哪幾種屬性？
*state：基本數據
*getters：從基本數據派生的數據
*mutations：提交更改數據的方法，同步！
*actions：像一個裝飾器，包裹 mutations，使之可以異步。
*modules：模塊化 Vuex。
6. 如何讓 CSS 旨在當前組件中起作用？
當前組件的 < style> 標籤修改爲 < style scoped>
問題九.生命週期是什麼
Vue 實例有一個完整的生命週期，也就是從開始創建、初始化數據、編譯模版、掛載Dom -> 渲染、更新-> 渲染、卸載等一系列過程，我們稱這是Vue的生命週期。
各個生命週期的作用
| 生命週期 | 描述 |
|---|---|
| beforeCreate | 組件實例被創建之初，組件的屬性生效之前 |
| created | 組件實例已經完全創建，屬性也綁定，但真實dom還沒有生成，$el還不可用 |
| beforeMount | 在掛載開始之前被調用：相關的render 函數首次被調用 |
| mounted | el 被新創建的vm.$el 替換，並掛載到實例上去之後調用該鉤子 |
| beforeUpdate | 組件數據更新之前調用，發生在虛擬DOM 打補丁之前 |
| update | 組件數據更新之後 |
| activited | keep-alive專屬，組件被激活時調用 |
| deadctivated | keep-alive專屬，組件被銷毀時調用 |
| beforeDestory | 組件銷毀前調用 |
| destoryed | 組件銷毀後調用 |
