Vue全家桶 · 前端題

## Vue有什么優點？/ 為什么使用Vue？ * 響應式數據綁定，數據更新頁面自動更新，擺脫繁雜的工作，使優化UI變得簡單 * 組件化開發 ## 你怎么理解組件化開發？相似模塊，比如輪播，彈窗，頭部，底部可以做成組件，直接調用，不用每個頁面重復些代碼 ## vue的所有流程 1. 安裝nodejs 2. 全局安裝vue-cli腳手架 3. 通過vue init webpack 創建一個基于webpack模板的新項目 4. 進入新項目 5. 安裝依賴 6. 運行項目 7. 項目完成后通過npm run build打包給運維或者項目主管 ## vue的數據雙向綁定的原理是什么？對vue有自己的理解，有深入了解低層次的原理嗎？ vue使用defineProperty指令定義屬性，通過監聽這個屬性的變化實現數據雙向綁定 ## v-if和v-show有什么區別？根據布爾值判斷， v-show是頁面元素的顯示與隱藏，v-if是頁面元素的存在或者不存在 ## 如何讓css只在當前組件中起作用？ style標簽加 scoped ## ref的使用場景？可以通過this.$refs拿到頁面上定義了ref屬性的元素。 ## 計算屬性有何作用？ data和computed都是可以在view模板上直接使用的變量，data一般存放源數據，computed計算屬性則可以根據data或者別的數據來重新計算一個新的數據。使用場景，比如購物車的總數量，可以通過data里面的購物車列表數據，用computed生成一個購物車長度的新值 ## 組件之間數據是怎么通訊？組件之間數據怎么傳輸? 組件數據怎么傳遞？ #### 1.Vuex #### 2.通過路由可以傳遞參數，比如id #### 3.父傳子比如一般移動端頭部樣式都差不多的，只是標題不一樣，可以寫成子組件，通過給子組件的屬性props，父組件就可以通過給子組件設置屬性把數據傳遞進去，實現不同頁面標題不一樣 #### 4.子傳父通過$emit觸發父組件傳的事件，然后把數據傳給父組件，比如文本框組件，把文本框的值傳遞給父組件 ## Vuex的原理？ Vuex里面有state、actions、mutations，其中state是公用數據，actions是調接口的，mutaions是修改state用的，getter就是Vuex的計算屬性，modules就是模塊化。舉個例子：列表頁要調列表頁數據，那么我可以通過dispatch去跟actions調接口，然后數據返回后通過commit讓mutations去修改state，那么state更新后，就去渲染頁面。 ## Vue的生命周期? 就是創建組件的時候，當創建之前會觸發beforeCreated函數，創建好了會觸發created函數，綁定到頁面之前會觸發beforeMounted，綁定好了觸發mounted，更新之前會觸發beforeUpdated，更新后觸發updated，銷毀前觸發beforeDestroyed，銷毀后觸發destroyed。這些函數都是回調函數，也可以說是鉤子函數。舉個例子：進入這個列表頁想要調接口，那么你可以在created初始化數據，mounted里面寫調接口獲取數據渲染頁面 #### beforeCreate 實例、組件通過new Vue() 創建出來之后會初始化事件和生命周期，然后就會執行beforeCreate鉤子函數，這個時候，數據還沒有掛載呢，只是一個空殼，無法訪問到數據和真實的dom，一般不做操作 #### created 掛載數據，綁定事件等等，然后執行created函數，這個時候已經可以使用到數據，也可以更改數據,在這里更改數據不會觸發updated函數，在這里可以在渲染前倒數第二次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這里做初始數據的獲取 #### beforeMount 接下來開始找實例或者組件對應的模板，編譯模板為虛擬dom放入到render函數中準備渲染，然后執行beforeMount鉤子函數，在這個函數中虛擬dom已經創建完成，馬上就要渲染,在這里也可以更改數據，不會觸發updated，在這里可以在渲染前最后一次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這里做初始數據的獲取 ### mounted 接下來開始render，渲染出真實dom，然后執行mounted鉤子函數，此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了，可以在這里操作真實dom等事情... ### beforeUpdate 當組件或實例的數據更改之后，會立即執行beforeUpdate，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒 ### updated 當更新完成后，執行updated，數據已經更改完成，dom也重新render完成，可以操作更新后的虛擬dom #### beforeDestroy 當經過某種途徑調用$destroy方法后，立即執行beforeDestroy，一般在這里做一些善后工作，例如清除計時器、清除非指令綁定的事件等等 #### destroyed 組件的數據綁定、監聽...去掉后只剩下dom空殼，這個時候，執行destroyed，在這里做善后工作也可以