、簡單頁面

1、CSS選擇器樣式優先級

2、CSS實現三列布局（左右固定寬度，中間自適應）

（1）CSS浮動

第一個float:left，第二個float:right，第三個設置margin-left和margin-right

（2）絕對定位法

第一個定位到left，第二個定位到right，第三個設置margin-left和margin-right

（3）flex布局

3、如果要做優化，CSS提高性能的方法有哪些？

• 內聯首屏關鍵CSS
• 異步加載CSS
• 資源壓縮
• 合理使用選擇器
• 減少使用昂貴的屬性
• 不要使用@import

二、js

1、防抖和節流，應用場景

• 防抖和節流都是防止某一時間頻繁觸發，但是原理卻不一樣。
• 防抖是將多次執行變為只執行一次，節流是將多次執行變為每隔一段時間執行。

防抖(debounce)：

1. search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。
2. window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

節流(throttle)：

1. 鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)
2. 監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷

2、什么是閉包

「函數」和「函數內部能訪問到的變量」（也叫環境）的總和，就是一個閉包。

3、繼承有哪些方法

• 原型鏈繼承
• 借用構造函數繼承（偽造對象、經典繼承）
• 實例繼承（原型式繼承）
• 組合式繼承
• 寄生組合繼承
• es6繼承 extends

4、什么是深/淺拷貝，有哪些實現方式

基本數據類型：string、number、boolean、undefined、null、Symbol（ES6，符號類型）

引用數據類型：object、array、function

JS數據類型分為基本數據類型和引用數據類型，基本數據類型保存的是值，引用類型保存的是引用地址(this指針)。淺拷貝共用一個引用地址，深拷貝會創建新的內存地址。

JSON字符串轉換為JSON對象：

將JSON對象轉化為JSON字符串：

Object.assign：對象的合并 （第一級屬性深拷貝，第一級以下的級別屬性淺拷貝。）

ES6中的 Object.assign()，第一個參數必須是個空對象。

Object.assign() 方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，然后返回目標對象。

5、數組有哪些常用方法，引出下一個問題,slice和splice區別：

1. splice改變原數組，slice不改變原數組。
2. splice除了可以刪除之外，還可以插入。
3. splice可傳入3個參數，slice接受2個參數。

6、Promise.all和Promise.race的區別，應用場景

Promise.all()可以將多個實例組裝個成一個新實例，成功的時候返回一個成功的數組；失敗的時候則返回最先被reject失敗狀態的值。

適用場景：比如當一個頁面需要在很多個模塊的數據都返回回來時才正常顯示，否則loading。

promise.all中的子任務是并發執行的，適用于前后沒有依賴關系的。Promise.race()意為賽跑的意思，也就是數組中的任務哪個獲取的塊，就返回哪個，不管結果本身是成功還是失敗。一般用于和定時器綁定，比如將一個請求和三秒的定時器包裝成Promise實例，加入到Promise隊列中，請求三秒中還沒有回應時，給用戶一些提示或相應的操作。

7、微任務和宏任務的區別

1.宏任務：當前調用棧中執行的代碼成為宏任務。（主代碼快，定時器等等）。

2.微任務： 當前（此次事件循環中）宏任務執行完，在下一個宏任務開始之前需要執行的任務,可以理解為回調事件。（promise.then，proness.nextTick等等）。

3. 宏任務中的事件放在callback queue中，由事件觸發線程維護；微任務的事件放在微任務隊列中，由js引擎線程維護。

微任務：process.nextTick、MutationObserver、Promise.then catch finally

宏任務：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame

1、Vue中的的通信方式有幾種？隔代組件的通信你用那種方式解決？

props/$emit 適用父子組件通信

ref與parent/children適用父子組件通信

attrs/listeners,provide/inject 適用于隔代組件通信

vuex,EventBus(事件總線) 適用于父子、隔代、兄弟組件通信

2、v-show 和 v-if指令的共同點和不同點？

v-show是css切換，v-if是完整的銷毀和重新創建，如果頻繁切換時用v-show，運行時較少改變用v-if

3、為什么使用key？

做一個唯一標識， Diff 算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬 DOM。

4、簡述computed和watch的使用場景

computed:

• 支持緩存，數據變，直接會觸發相應的操作。
• 監聽的函數接收兩個參數，第一個參數是最新的值；第二個參數是輸入之前的值。
• 當一個屬性發生變化時，需要執行對應的操作；即一個屬性受多個屬性影響，多對一或者一對一的關系。
• 監聽的是這個屬性自身的變化，且不會操作緩存。
• 監聽數據必須是data中聲明過或者父組件傳遞過來的props中的數據，當數據變化時，觸發其他操作，函數有兩個參數，是一個計算屬性,類似于過濾器,對綁定到view的數據進行處理

　　　　當一個屬性受多個屬性影響的時候就需要用到computed

　　　　最典型的例子： 購物車商品結算的時候

watch:

1.是觀察的動作

2.應用：監聽props，$emit或本組件的值執行異步操作

3.無緩存性，頁面重新渲染時值不變化也會執行

watch是一個觀察的動作

　　　　當一條數據影響多條數據的時候就需要用watch

　　　　例子：搜索數據

5、params和query的區別（怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值？）

6、$route 和 $router 的區別

7、vue-router 有哪幾種導航鉤子?

1.全局導航鉤子：router.beforeEach(to,from,next)作用：跳轉前進行判斷攔截、組件內的鉤子、單獨路由獨享組件

2、路由獨享鉤子可以在路由配置上直接定義 beforeEnter

3、組件內的導航鉤子有三種：

beforeRouteEnter 在進入當前組件對應的路由前調用

beforeRouteUpdate 在當前路由改變，但是該組件被復用時調用

beforeRouteLeave 在離開當前組件對應的路由前調用=

8、Vue實例的生命周期講一下, mounted階段真實DOM存在了嘛?

Vue實例從創建到銷毀的過程，就是生命周期。

也就是：開始創建->初始化數據->編譯模板->掛載dom->數據更新重新渲染虛擬 dom->最后銷毀。這一系列的過程就是vue的生命周期。所以在mounted階段真實的DOM就已經存在了。

beforeCreate：vue實例的掛載元素el和數據對象data都還沒有進行初始化，還是一個 undefined狀態

created: 此時vue實例的數據對象data已經有了，可以訪問里面的數據和方法， el還沒有，也沒有掛載dom

beforeMount: 在這里vue實例的元素el和數據對象都有了，只不過在掛載之前還是虛擬的dom節點

mounted: vue實例已經掛在到真實的dom上，可以通過對 dom操作來獲取dom節點

beforeUpdate: 響應式數據更新時調用，發生在虛擬dom打補丁之前，適合在更新之前訪問現有的 dom，比如手動移除已添加的事件監聽器

updated: 虛擬dom重新渲染和打補丁之后調用，組成新的 dom已經更新，避免在這個鉤子函數中操作數據，防止死循環。

activated: 當組件keep-alive激活時被調用

deactivated:當組件keep-alive停用時被調用

beforeDestroy: vue實例在銷毀前調用，在這里還可以使用，通過this也能訪問到實例，可以在這里對一些不用的定時器進行清除，解綁事件。

destroyed：vue實例銷毀后調用，調用后所有事件監聽器會被移除，所有的子實例都會被銷毀。

9、vuex有哪幾種屬性，怎么使用？哪種功能場景使用它？

vuex是一個專門為vue.js開發的狀態管理模式，每一個vuex應用核心就是store(倉庫)。store基本上就是一個容器，它包含著你的應用中大部分的state(狀態)。

vuex的狀態存儲是響應式的，當 vue組件中store中讀取狀態時候，若store中的狀態發生變化，那么相應的組件也會相應地得到高效更新。

改變store中的狀態的唯一途徑就是顯示 commit(提交)mutation，這樣使得我們可以方便地跟蹤每一個狀態的變化。

State: 定義了應用狀態的數據結構，可以在這里設置默認的初始狀態

Getter: 允許組件從Stroe中獲取數據， mapGetters輔助函數僅僅是將store中的getter映射到計算屬性。

Mutation: 唯一更改store中狀態的方法，且必須是同步函數。

Action: 用于提交muatation, 而不是直接變更狀態，可以包含任意異步操作。

Module: modules，可以讓每一個模塊擁有自己的state、mutation、action、getters，使得結構非常清晰，方便管理；如果所有的狀態或者方法都寫在一個store里面，將會變得非常臃腫，難以維護。

10、vuex中state存儲的數據如果頁面刷新此時數據還會有嗎?（刷新之后銷毀了）

11、v-bind和v-model的區別， v-model原理知道嗎？

• v-bind用來綁定數據和屬性以及表達式
• v-model使用在表單中，實現雙向數據綁定的。

12、Vue中的常見指令有那些？

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

13.改變this指向call、apply與bind區別：

前兩個可以自動執行，bind不會自動執行，需要手動調用。

call、bind與apply區別：前兩個都有無數個參數，apply只有兩個參數，而且第二個參數為數組。

14：vue路由的兩種模式

1.hash模式

特點:在url地址上有#號

實現的原理:原生的hasChange事件來實現,來監聽hash值的變化

window.onhaschange=function(){}

刷新頁面的時候:不會去發送請求,頁面不會有任何問題,不需要后端來配合

2.history模式

特點:在url地址上沒有#號,比較與hash模式看起來好看一些

實現的原理:利用的是history的api 來實現的 popState() 來實現的

刷新頁面的時候:會去發送請求然后會導致頁面出現找不到的情況,需要后端來配合解決

15：vue的響應式原理：

vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 數據劫持，來劫持各個屬性的setter，getter，在數據更新時發布消息給訂閱者，觸發相應監聽回調。

當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。

16：Flex容器屬性

1. flex-direction主軸方向（row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。）

2. flex-wrap（nowrap（默認值）：不換行。

wrap：換行。

wrap-reverse：換行，第一行在下方。 ）

3. flex-flow（12簡寫形式）
4. justify-content項目在主軸上的對齊方式。（flex-start（默認值）：左對齊（即上面頁面展示效果）

flex-end：右對齊

center： 居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。）

5. align-items項目在交叉軸上如何對齊。（lex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。）

6. align-content

17：標準盒模型和怪異盒模型的區別：

怪異盒模型的寬度變小

• 標準盒大小計算公式：width(content) + padding + border + margin
• 怪異盒大小的計算公式：width(content + padding + border) + margin

18.vue的插槽（slot）主要分三種：

默認插槽，具名插槽，作用域插槽

vue中的插槽，指的是子組件中提供給父組件使用的一個占位符；

用標簽表示，父組件可以在這個占位符中填充任何模板代碼，比如HTML、組件等，填充的內容會替換掉子組件的標簽（替換占位符）。

19.vue數據的雙向綁定

“vue數據的雙向綁定是通過數據劫持結合發布者-訂閱者模式的方式來實現的。其核心就是通過Object.defineProperty()方法設置set和get函數來實現數據的劫持,在數據變化時發布消息給訂閱者,觸發相應的監聽回調。也就是說數據和視圖同步,數據發生變化,視圖跟著變化,視圖變化,數據也隨之發生改變;”

20.常用的git命令

21.數組和字符串的相互轉換

使用字符串的 split() 方法可以根據指定的分隔符把字符串切分為數組。

如果使用數組的 join() 方法，可以把數組元素連接為字符串。

22.js 判斷數據類型的幾種方法

23.toString 方法

把對象直接轉換成字符串

24.es6新特性：

25.webpack

1、webpack的作用是什么，談談你對它的理解？

現在的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行后，JavaScript的復雜度增加和需要一大堆依賴包，還需要解決Scss，Less……新增樣式的擴展寫法的編譯工作，所以現代化的前端已經完全依賴于webpack的輔助了。

現在最流行的三個前端框架，可以說和webpack已經緊密相連，框架官方都推出了和自身框架依賴的webpack構建工具。

react.js+WebPack

vue.js+WebPack

AngluarJS+WebPack

2、webpack的工作原理?

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現后，Webpack還肩負起了優化項目的責任。

3、webpack打包原理

把一切都視為模塊：不管是 css、JS、Image 還是 html 都可以互相引用，通過定義 entry.js，對所有依賴的文件進行跟蹤，將各個模塊通過 loader 和 plugins 處理，然后打包在一起。

按需加載：打包過程中 Webpack 通過 Code Splitting 功能將文件分為多個 chunks，還可以將重復的部分單獨提取出來作為 commonChunk，從而實現按需加載。把所有依賴打包成一個 bundle.js 文件，通過代碼分割成單元片段并按需加載。

4、webpack的核心概念

Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。告訴webpack要使用哪個模塊作為構建項目的起點，默認為./src/index.js

output ：出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認為./dist

Module：模塊，在 Webpack 里一切皆模塊，一個模塊對應著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用于代碼合并與分割。

Loader：模塊轉換器，用于把模塊原內容按照需求轉換成新內容。

Plugin：擴展插件，在 Webpack 構建流程中的特定時機會廣播出對應的事件，插件可以監聽這些事件的發生，在特定時機做對應的事情。

5、Webpack的基本功能有哪些？

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等

文件優化：壓縮 JavaScript、CSS、html 代碼，壓縮合并圖片等

代碼分割：提取多個頁面的公共代碼、提取首屏不需要執行部分的代碼讓其異步加載

模塊合并：在采用模塊化的項目有很多模塊和文件，需要構建功能把模塊分類合并成一個文件

自動刷新：監聽本地源代碼的變化，自動構建，刷新瀏覽器

代碼校驗：在代碼被提交到倉庫前需要檢測代碼是否符合規范，以及單元測試是否通過

自動發布：更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。

6、gulp/grunt 與 webpack的區別是什么?

三者都是前端構建工具，grunt和gulp在早期比較流行，現在webpack相對來說比較主流，不過一些輕量化的任務還是會用gulp來處理，比如單獨打包CSS文件等。grunt和gulp是基于任務和流（Task、Stream）的。

類似jQuery，找到一個（或一類）文件，對其做一系列鏈式操作，更新流上的數據， 整條鏈式操作構成了一個任務，多個任務就構成了整個web的構建流程。webpack是基于入口的。

webpack會自動地遞歸解析入口所需要加載的所有資源文件，然后用不同的Loader來處理不同的文件，用Plugin來擴展webpack功能。

7、webpack是解決什么問題而生的?

如果像以前開發時一個html文件可能會引用十幾個js文件,而且順序還不能亂，因為它們存在依賴關系，同時對于ES6+等新的語法，less, sass等CSS預處理都不能很好的解決，此時就需要一個處理這些問題的工具。

26.MVVM模式

1、MVVM相比較于MVP，將Presenter變成ViewModel，ViewModel可以理解成是View的數據模型和Presenter的合體。

2、MVVM中的數據可以實現雙向綁定，即View層數據變化則ViewModel中的數據也隨之變化，反之ViewModel中的數據變化，則View層數據也隨之變化。

注：MVC指的是Model-View-Controller，分別代表著模型層、視圖層、控制器。

27.原型鏈

當js試圖得到一個對象的屬性時，會先去這個對象的本身去尋找，如果這個對象本身沒有找到這個屬性，那么js就會去它構造函數的’prototype’屬性中去尋找,也就是去’proto‘中尋找，如果’prototype’屬性本身中依舊沒有找到，’prototype’中依舊有一個‘proto’。

原型可以解決什么問題：

• 對象共享屬性和方法
• 誰有原型：
• 函數擁有：prototype
• 對象擁有：proto
• 對象查找屬性或者方法的順序：
• 先在對象本身查找–>構造函數中查找–>對象的原型中查找–>構造函數的原型中查找–>當前原型中查找
• 原型鏈的最頂端是null

28.閉包

閉包就是指有權訪問另一個函數作用域中的變量的函數

MDN 上面這么說：閉包是一種特殊的對象。

閉包的作用域鏈包含著它自己的作用域，以及包含它的函數的作用域和全局作用域。

閉包的注意事項：

通常，函數的作用域及其所有變量都會在函數執行結束后被銷毀。但是，在創建了一個閉包以后，這個函數的作用域就會一直保存到閉包不存在為止。

我們首先知道閉包有3個特性：

①函數嵌套函數

②函數內部可以引用函數外部的參數和變量

③參數和變量不會被垃圾回收機制回收

優點:

①保護函數內的變量安全 ，實現封裝，防止變量流入其他環境發生命名沖突

②在內存中維持一個變量，可以做緩存（但使用多了同時也是一項缺點，消耗內存）

③匿名自執行函數可以減少內存消耗

閉包的缺點就是常駐內存會增大內存使用量，并且使用不當很容易造成內存泄露。

如果不是因為某些特殊任務而需要閉包，在沒有必要的情況下，在其它函數中創建函數是不明智的，因為閉包對腳本性能具有負面影響，包括處理速度和內存消耗。

29.Vue和React的區別是什么？

一、核心思想不同

Vue是一個靈活易用的漸進式雙向綁定的MVVM框架。

React的核心思想是聲明式渲染和組件化、單向數據流，React既不屬于MVC也不屬于MVVM架構。

注：React的單向數據流指的是數據主要從父節點通過props傳遞到子節點

如果頂層某個props改變了，React會重新渲染所有的子節點，但是單向數據流并非單向綁定，React想要從一個組件去更新另一個組件的狀態，需要進行狀態提升，即將狀態提升到他們最近的祖先組件中，觸發父組件的狀態變更，從而影響另一個組件的顯示。

單向數據流的好處是能夠保證狀態改變的可追溯性，假如，父組件維護了一個狀態，子組件如果能夠隨意更改父組件的狀態，那么各組件的狀態改變就會變得難以追溯。

二、組件寫法上不同

Vue的組件寫法是通過template的單文件組件格式。

React的組件寫法是JSX+inline style，也就是吧HTML和CSS全部寫進JavaScript中。

三、Diff算法不同

Diff算法是一種對比算法，主要是對比舊的虛擬DOM和新的虛擬DOM，找出發生更改的節點，并只

更新這些接地那，而不更新未發生變化的節點，從而準確的更新DOM，減少操作真實DOM的次數，提高性能。

vue對比節點，如果節點元素類型相同，但是className不同，認為是不同類型的元素，會進行刪除重建，但是react則會認為是同類型的節點，只會修改節點屬性。

vue的列表比對采用的是首尾指針法，而react采用的是從左到右依次比對的方式，當一個集合只是把最后一個節點移動到了第一個，react會把前面的節點依次移動，而vue只會把最后一個節點移動到最后一個，從這點上來說vue的對比方式更加高效。

四、響應式原理不同

React的響應式原理

React主要是通過setState()方法來更新狀態，狀態更新之后，組件也會重新渲染。

Vue的響應式原理

vue會遍歷data數據對象，使用Object.definedProperty()將每個屬性都轉換為getter和

setter，每個Vue組件實例都有一個對應的watcher實例，在組件初次渲染的時候會記錄組件用到了那些數據，當數據發生改變的時候，會觸發setter方法，并通知所有依賴這個數據的watcher實例調用update方法去觸發組件的compile渲染方法，進行渲染數據。

30. rem的特點：

1、rem的大小是根據html根目錄下的字體大小進行計算的。

2、當我們改變根目錄下的字體大小的時候，下面字體都改變。

3、rem不僅可以設置字體的大小，也可以設置元素寬、高等屬性。

31.http請求過程

瀏覽器發起請求-> 解析域名得到ip進行TCP連接 ->瀏覽器發送HTTP請求和頭信息發送->服務器對瀏覽器進行應答，響應頭信息和瀏覽器所需的內容-> 關閉TCP連接或保持-> 瀏覽器得到數據數據進行操作。

32.前端如何實現跨域？

當一個請求 url 的協議、域名、端口三者之間任意一個與當前頁面 url 不同即為跨域出于瀏覽器的同源策略限制。

同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。

1.JSONP原理

利用script元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 數據。

但是JSONP請求一定需要對方的服務器做支持才可以。

JSONP優點是兼容性好，可用于解決主流瀏覽器的跨域數據訪問的問題。

缺點是僅支持get方法具有局限性。

2.CORS原理

實現CORS通信的關鍵是服務器，需要在服務器端做一些小小的改造。

只要服務器實現了CORS接口，就可以跨源通信。

在響應頭上添加Access-Control-Allow-Origin屬性，指定同源策略的地址。同源策略默認地址是網頁的本身。只要瀏覽器檢測到響應頭帶上了CORS，并且允許的源包括了本網站，那么就不會攔截請求響應。

3.Nginx

瀏覽器在訪問受限時，可通過不受限的代理服務器訪問目標站點。

proxy代理是前端用的最多的解決跨域的方法。

即配置一臺和瀏覽器相同端口的服務器，瀏覽器訪問代理服務器，代理服務器向目標服務器發送請求，由于服務器之間不存在跨域問題，代理服務器就可以拿到請求數據，而后因為瀏覽器和代理服務器端口號一致，不存在跨域問題，因此瀏覽器不會攔截從代理服務器收到的數據，順利拿到請求數據。

例如：瀏覽器端口號8080，目標服務器端口號5000，在vue中配置代理服務器來訪問目標服務器

33.vue 中的 keep-alive

keep-alive 是 vue 中的內置組件，能夠在組件切換過程中將狀態保留在內存中，防止重復的渲染 DOM；

keep-alive 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們；

設置了 keep-alive 緩存的組件，會多出兩個生命周期鉤子（activated 和 deactivated ）。

34.vue.nextTick()方法

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

使用：

一、什么時候需要用的Vue.nextTick()？

1、Vue生命周期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中，原因是在created()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載已完成。

2.vue改變dom元素結構后使用vue.$nextTick()方法來實現dom數據更新后延遲執行后續代碼

二、em的特點：

1、字體大小是根據父元素字體大小設置的。

三、綜合

1、前端工程化理解（模塊化、組件化、規范化、自動化）

• JS的模塊化、css的模塊化、資源的模塊化
• 從UI拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元
• HTML規范、CSS規范、JS規范、圖片規范、命名規范
• 圖標合并、持續集成、自動化構建、自動化部署、自動化測試

2、組件封裝過程

建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。　　

準備好組件的數據輸入。即分析好邏輯，定好 props 里面的數據、類型。　　

準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。　　

封裝完畢了，直接調用即可。

四、擴展

1、Typescript中的內置類型 Number String Boolean Null Void Undefined

2、TS的接口是什么意思

接口是在我們的應用程序中充當契約的結構。它定義了要遵循的類的語法，這意味著實現接口的類必須實現它的所有成員。它不能被實例化，但是可以被實現它的類對象引用。無論對象是否具有特定的結構，TypeScript編譯器都使用接口進行類型檢查

4、nodejs搭建一個簡單的http服務器過程

5、Typescript中的類的特征（繼承、封裝、多態性、抽象）

————————————————

版權聲明：本文為CSDN博主「邊關月＿」的原創文章

原文鏈接：https://blog.csdn.net/weixin_44672169/article/details/116011608

計算機科學中，路徑是指向文件系統中某個位置的字符串。路徑可以是絕對的也可以是相對的。這篇文章將詳細解釋絕對路徑和相對路徑的區別，并通過例子來展示它們的使用。

絕對路徑（Absolute Paths）

絕對路徑是從文件系統的根目錄（在Windows系統中是驅動器的根，如C:\，在UNIX系統中是/）開始的完整路徑。它包含了從根目錄到目標文件或文件夾的所有目錄名，并以文件或文件夾名結束。

特點

• 不依賴于當前工作目錄。
• 通常較長，因為它們包含了完整的路徑信息。
• 在任何時候都指向同一個文件或文件夾，不會因為當前位置的變化而改變。

使用實例

假設我們有一個位于Windows系統D盤的圖片文件，其路徑可能是：

D:\Photos\Holiday\beach.jpg

在UNIX系統中，如果有一個配置文件位于根目錄下的etc文件夾中，其路徑可能是：

/etc/nginx/nginx.conf

無論當前位置在哪里，上述路徑都準確指向了特定的文件。

相對路徑（Relative Paths）

相對路徑是相對于當前工作目錄的路徑。它不是從根目錄開始，而是從當前目錄開始描述如何到達目標文件或文件夾。

特點

• 依賴于當前工作目錄。
• 通常較短，因為它們僅包含從當前目錄到目標位置的路徑信息。
• 可能會因為當前位置的變化而代表不同的文件或文件夾。

使用實例

假設當前工作目錄是D:\Photos，要引用Holiday文件夾中的beach.jpg圖片，相對路徑將是：

Holiday\beach.jpg

如果需要引用同一級別目錄下的另一個文件夾中的文件，例如當前工作目錄是D:\Photos\Holiday，要引用Work文件夾中的report.docx文件，相對路徑將使用..來表示上一級目錄：

..\Work\report.docx

在UNIX系統中，如果當前工作目錄是/etc/nginx，要引用同一級別的apache2目錄下的apache2.conf文件，相對路徑將是：

../apache2/apache2.conf

特殊符號

在相對路徑中，有兩個特殊符號經常使用：

• .（點）：表示當前目錄。
• ..（兩個點）：表示上一級目錄。

使用這些符號，可以在文件系統中向上或向下導航。

在網頁中使用絕對路徑和相對路徑

在創建網頁時，鏈接到CSS文件、JavaScript文件、圖片或其他網頁通常需要使用路徑。使用絕對路徑或相對路徑取決于資源的位置和你的特定需求。

HTML中的例子

假設網站的根目錄結構如下：

/ (根目錄)
|-- index.html
|-- about.html
|-- css
|   |-- styles.css
|-- images
|   |-- logo.png
|-- js
    |-- scripts.js

如果在index.html中引用styles.css，相對路徑將是：

<link rel="stylesheet" type="text/css" href="css/styles.css">

如果在index.html中引用logo.png，相對路徑將是：

<img src="images/logo.png" alt="Logo">

如果網站的URL是http://www.example.com，那么引用logo.png的絕對路徑將是：

<img src="http://www.example.com/images/logo.png" alt="Logo">

結論

絕對路徑和相對路徑都是定位文件系統中文件和文件夾的有效方式。絕對路徑提供了明確的位置，不依賴于當前工作目錄，而相對路徑則更加靈活，可以簡化文件的鏈接，尤其是在網頁設計和軟件開發中。理解這兩種路徑的差異和應用場景，對于任何與文件系統交互的活動都是至關重要的。