Vue2.0八——知識點整理

Cymiran發表於2017-12-06

1、active-class是哪個元件的屬性?巢狀路由怎麼定義?

答:vue-router模組的router-link元件。

2、怎麼定義vue-router的動態路由?怎麼獲取傳過來的動態引數?

答:在router目錄下的index.js檔案中,對path屬性加上/:id。  使用router物件的params.id

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

答:三種,一種是全域性導航鉤子:router.beforeEach(to,from,next),
作用:跳轉前進行判斷攔截。第二種:元件內的鉤子;第三種:單獨路由獨享元件

4、scss是什麼?安裝使用的步驟是?有哪幾大特性?

答:預處理css,把css當前函式編寫,定義變數,巢狀。
 先裝css-loader、node-loader、sass-loader等載入器模組,
 在webpack-base.config.js配置檔案中加多一個擴充:extenstion,
 再加多一個模組:module裡面test、loader

4.1、scss是什麼?在vue.cli中的安裝使用步驟是?有哪幾大特性?

答:css的預編譯。
使用步驟:
第一步:用npm 下三個loader(sass-loader、css-loader、node-sass)
第二步:在build目錄找到webpack.base.config.js,在那個extends屬性中加一個擴充.scss
第三步:還是在同一個檔案,配置一個module屬性
第四步:然後在元件的style標籤加上lang屬性 ,例如:lang=”scss”
有哪幾大特性:
1、可以用變數,例如($變數名稱=值);
2、可以用混合器,例如()
3、可以巢狀

5、mint-ui是什麼?怎麼使用?說出至少三個元件使用方法?

答:基於vue的前端元件庫。npm安裝,然後import樣式和js,
vue.use(mintUi)全域性引入。在單個元件區域性引入:
import {Toast} from ‘mint-ui’。元件一:
Toast(‘登入成功’);元件二:mint-header;元件三:mint-swiper

6、v-model是什麼?怎麼使用? vue中標籤怎麼繫結事件?

答:可以實現雙向繫結,指令(v-class、v-for、v-if、v-show、v-on)。
vue的model層的data屬性。繫結事件:<input @click=doLog() />

7、axios是什麼?怎麼使用?描述使用它實現登入功能的流程?

答:請求後臺資源的模組。npm install axios -S裝好,
然後傳送的是跨域,需在配置檔案中config/index.js進行設定。
後臺如果是Tp5則定義一個資源路由。js中使用import進來,
然後.get或.post。返回在.then函式中如果成功,
失敗則是在.catch函式中

8、axios+tp5進階中,呼叫axios.post(‘api/user’)是進行的什麼操作?axios.put(‘api/user/8′)呢?

答:跨域,新增使用者操作,更新操作。

9、什麼是RESTful API?怎麼使用?

答:是一個api的標準,無狀態請求。請求的路由地址是固定的,
如果是tp5則先路由配置中把資源路由配置好。標準有:.post .put .delete

10、vuex是什麼?怎麼使用?哪種功能場景使用它?

答:vue框架中狀態管理。在main.js引入store,注入。
新建了一個目錄store,….. export 。
場景有:單頁應用中,元件之間的狀態。音樂播放、登入狀態、加入購物車

11、mvvm框架是什麼?它和其它框架(jquery)的區別是什麼?哪些場景適合?

答:一個model+view+viewModel框架,資料模型model,viewModel連線兩個
區別:vue資料驅動,通過資料來顯示檢視層而不是節點操作。
場景:資料操作比較多的場景,更加便捷

12、自定義指令(v-check、v-focus)的方法有哪些?它有哪些鉤子函式?還有哪些鉤子函式引數?

答:全域性定義指令:在vue物件的directive方法裡面有兩個引數,一個是指令名稱,另外一個是函式。元件內定義指令:directives
鉤子函式:bind(繫結事件觸發)、inserted(節點插入的時候觸發)、update(元件內相關更新)
鉤子函式引數:el、binding

13、說出至少4種vue當中的指令和它的用法?

答:v-if:判斷是否隱藏;v-for:資料迴圈出來;v-bind:class:繫結一個屬性;v-model:實現雙向繫結

14、vue-router是什麼?它有哪些元件?

答:vue用來寫路由一個外掛。router-link、router-view

15、導航鉤子有哪些?它們有哪些引數?

答:導航鉤子有:a/全域性鉤子和元件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
引數:有to(去的那個路由)、from(離開的路由)、next(一定要用這個函式才能去到下一個路由,如果不用就攔截)最常用就這幾種

16、Vue的雙向資料繫結原理是什麼?

答:vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。
具體步驟:
第一步:需要observe的資料物件進行遞迴遍歷,包括子屬性物件的屬性,都加上 setter和getter
這樣的話,給這個物件的某個值賦值,就會觸發setter,那麼就能監聽到了資料變化
第二步:compile解析模板指令,將模板中的變數替換成資料,然後初始化渲染頁面檢視,並將每個指令對應的節點繫結更新函式,新增監聽資料的訂閱者,一旦資料有變動,收到通知,更新檢視
第三步:Watcher訂閱者是Observer和Compile之間通訊的橋樑,主要做的事情是:
1、在自身例項化時往屬性訂閱器(dep)裡面新增自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時,能呼叫自身的update()方法,並觸發Compile中繫結的回撥,則功成身退。
第四步:MVVM作為資料繫結的入口,整合Observer、Compile和Watcher三者,通過Observer來監聽自己的model資料變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通訊橋樑,達到資料變化 -> 檢視更新;檢視互動變化(input) -> 資料model變更的雙向繫結效果。
ps:16題答案同樣適合”vue data是怎麼實現的?”此面試題。

17、請詳細說下你對vue生命週期的理解?

答:總共分為8個階段建立前/後,載入前/後,更新前/後,銷燬前/後。
建立前/後: 在beforeCreated階段,vue例項的掛載元素$el和資料物件data都為undefined,還未初始化。在created階段,vue例項的資料物件data有了,$el還沒有。
載入前/後:在beforeMount階段,vue例項的$el和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。在mounted階段,vue例項掛載完成,data.message成功渲染。
更新前/後:當data變化時,會觸發beforeUpdate和updated方法。
銷燬前/後:在執行destroy方法後,對data的改變不會再觸發周期函式,說明此時vue例項已經解除了事件監聽以及和dom的繫結,但是dom結構依然存在

18、請說下封裝 vue 元件的過程?

答:首先,元件可以提升整個專案的開發效率。能夠把頁面抽象成多個相對獨立的模組,解決了我們傳統專案開發:效率低、難維護、複用性等問題。
然後,使用Vue.extend方法建立一個元件,然後使用Vue.component方法註冊元件。子元件需要資料,可以在props中接受定義。而子元件修改好資料後,想把資料傳遞給父元件。可以採用emit方法。

19、你是怎麼認識vuex的?

答:vuex可以理解為一種開發模式或框架。比如PHP有thinkphp,java有spring等。
通過狀態(資料來源)集中管理驅動元件的變化(好比spring的IOC容器對bean進行集中管理)。
應用級的狀態集中放在store中; 改變狀態的方式是提交mutations,這是個同步的事物; 非同步邏輯應該封裝在action中。

20、vue-loader是什麼?使用它的用途有哪些?

答:解析.vue檔案的一個載入器,跟template/js/style轉換成js模組。
用途:js可以寫es6、style樣式可以scss或less、template可以加jade等

21、請說出vue.cli專案中src目錄每個資料夾和檔案的用法?

答:assets資料夾是放靜態資源;components是放元件;router是定義路由相關的配置;view檢視;app.vue是一個應用主元件;main.js是入口檔案

22、vue.cli中怎樣使用自定義的元件?有遇到過哪些問題嗎?

答:第一步:在components目錄新建你的元件檔案(smithButton.vue),script一定要export default {
第二步:在需要用的頁面(元件)中匯入:import smithButton from ‘../components/smithButton.vue’
第三步:注入到vue的子元件的components屬性上面,components:{smithButton}
第四步:在template檢視view中使用,<smith-button>  </smith-button>
問題有:smithButton命名,使用的時候則smith-button。

23、聊聊你對Vue.js的template編譯的理解?

答:簡而言之,就是先轉化成AST樹,再得到的render函式返回VNode(Vue的虛擬DOM節點)
詳情步驟:
首先,通過compile編譯器把template編譯成AST語法樹(abstract syntax tree 即 原始碼的抽象語法結構的樹狀表現形式),compile是createCompiler的返回值,createCompiler是用以建立編譯器的。另外compile還負責合併option。
然後,AST會經過generate(將AST語法樹轉化成render funtion字串的過程)得到render函式,render的返回值是VNode,VNode是Vue的虛擬DOM節點,裡面有(標籤名、子節點、文字等等)

24、vue的元件是怎麼定義的?父元件怎麼給子元件傳值?

答:首先註冊vue.components,第一個引數是元件名稱,第二個引數是選項。
直接繫結一個屬性,然後在子元件props裡面接收

25、使用過element.ui嗎?說下它其中兩個元件的使用方法?

答:使用過用過一個佈局的,它是由24份,它的寫法是:span後面帶的數字它佔24份裡面的寬度。:offset是它
的間距,後面也是跟數字,也是從24份裡面取的。
input按鈕,標籤是el-input,後面type跟上一個屬性就是顯示不同按鈕的型別,有預設的default
(預設的)、success(成功的)、warning(警告)、danger(危險)、info()、primary()

26、說下你對mvvm的理解?雙向繫結的理解?

答:mvvm就是vm框架檢視、m模型就是用來定義驅動的資料、v經過資料改變後的html、vm就是用來實現雙向繫結
    雙向繫結:一個變了另外一個跟著變了,例如:檢視一個繫結了模型的節點有變化,模型對應的值會跟著變

27、說出你所使用過的vue指令

答:v-on(監聽事件、@change、@click)、v-if(判斷的)、v-show(顯示/隱藏)、v-bind(繫結屬性、:disabled、:src)

28、你覺得怎樣的自定義元件是完善的?至少說出4點

答:第一點、可以通用
第二點、程式碼儘量簡潔
第三點、容易修改
第四點、功能要多一點 

一、請說下具體使用vue的理解?

答:1、使用vue不必擔心佈局更改和類名重複導致的js重寫,因為它是靠資料驅動雙向繫結,底層是通過Object.defineProperty() 定義的資料 set、get 函式原理實現。
2、元件化開發,讓專案的可擴充性、移植性更好,程式碼重用性更高,就好像農民工建房子,拿起自己的工具包就可以開工。專案經理坐等收樓就好。
3、單頁應用的體驗零距離接觸安卓原生應用,區域性元件更新介面,讓使用者體驗更快速省時。
4、js的程式碼無形的規範,團隊合作開發程式碼可閱讀性更高。

二、你覺得哪些專案適合vue框架?

答:1、資料資訊量比較多的,反之類似企業網站就無需此框架了。
2、手機web和app應用多端共用一套介面的專案,因為使用vue.cli+webpack後的前端目錄,非常有利於專案的跨平臺部署。

三、怎麼理解MVVM模式的這些框架?

答:1、M就是Model模型層,存的一個資料物件。
2、V就是View檢視層,所有的html節點在這一層。
3、VM就是ViewModel,它通過data屬性連線Model模型層,通過el屬性連線View檢視層。

四、PC端專案你會在哪些場景使用Vue框架?

答:上萬級資料需要瀑布流更新和搜尋的時候,因為資料龐大的時候,用原生的dom操作js和html都會有列表的html佈局,迭代很困難。再一個dom節點的大面積新增會影響效能。
那麼vue為什麼解決這些問題呢?
第一:只需用v-for在view層一個地方遍歷資料即可,無需複製一段html程式碼在js和html兩個地方。
第二:vue通過Virtual Dom就是在js中模擬DOM物件樹來優化DOM操作。

vuex
1、vuex有哪幾種屬性?

答:有五種,分別是 State、 Getter、Mutation 、Action、 Module

2、vuex的State特性是?

答:
一、Vuex就是一個倉庫,倉庫裡面放了很多物件。其中state就是資料來源存放地,對應於與一般Vue物件裡面的data
二、state裡面存放的資料是響應式的,Vue元件從store中讀取資料,若是store中的資料發生改變,依賴這個資料的元件也會發生更新
三、它通過mapState把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中

3、vuex的Getter特性是?

答:
一、getters 可以對State進行計算操作,它就是Store的計算屬性
二、 雖然在元件內也可以做計算屬性,但是getters 可以在多元件之間複用
三、 如果一個狀態只在一個元件內使用,是可以不用getters

4、vuex的Mutation特性是?

答:
一、Action 類似於 mutation,不同在於:
二、Action 提交的是 mutation,而不是直接變更狀態。
三、Action 可以包含任意非同步操作

5、Vue.js中ajax請求程式碼應該寫在元件的methods中還是vuex的actions中?

答:
一、如果請求來的資料是不是要被其他元件公用,僅僅在請求的元件內使用,就不需要放入vuex 的state裡。
二、如果被其他地方複用,這個很大機率上是需要的,如果需要,請將請求放入action裡,方便複用,幷包裝成promise返回,在呼叫處用async await處理返回的資料。如果不要複用這個請求,那麼直接寫在vue檔案裡很方便。

6、不用Vuex會帶來什麼問題?

答:
一、可維護性會下降,你要想修改資料,你得維護三個地方
二、可讀性會下降,因為一個元件裡的資料,你根本就看不出來是從哪來的
三、增加耦合,大量的上傳派發,會讓耦合性大大的增加,本來Vue用Component就是為了減少耦合,現在這麼用,和元件化的初衷相背。

生命週期
1、什麼是vue生命週期?

答: Vue 例項從建立到銷燬的過程,就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、解除安裝等一系列過程,我們稱這是 Vue 的生命週期。

2、vue生命週期的作用是什麼?

答:它的生命週期中有多個事件鉤子,讓我們在控制整個Vue例項的過程時更容易形成好的邏輯。

3、vue生命週期總共有幾個階段?

答:它可以總共分為8個階段:建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後

4、第一次頁面載入會觸發哪幾個鉤子?

答:第一次頁面載入時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

5、DOM 渲染在 哪個週期中就已經完成?
答:DOM 渲染在 mounted 中就已經完成了。

6、簡單描述每個週期具體適合哪些場景?

答:生命週期鉤子的一些使用方法: beforecreate : 可以在這加個loading事件,在載入例項時觸發 created : 初始化完成時的事件寫在這裡,如在這結束loading事件,非同步請求也適宜在這裡呼叫 mounted : 掛載元素,獲取到DOM節點 updated : 如果對資料統一處理,在這裡寫上相應函式 beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新資料後立即操作dom 

axios
1、axios的特點有哪些?

答:
一、Axios 是一個基於 promise 的 HTTP 庫,支援promise所有的API
二、它可以攔截請求和響應
三、它可以轉換請求資料和響應資料,並對響應回來的內容自動轉換成 JSON型別的資料
四、安全性更高,客戶端支援防禦 XSRF

2、axios有哪些常用方法?

答:
一、axios.get(url[, config])   //get請求用於列表和資訊查詢
二、axios.delete(url[, config])  //刪除
三、axios.post(url[, data[, config]])  //post請求用於資訊的新增
四、axios.put(url[, data[, config]])  //更新操作

3、說下你瞭解的axios相關配置屬性?

答:
`url`是用於請求的伺服器URL

`method`是建立請求時使用的方法,預設是get

`baseURL`將自動加在`url`前面,除非`url`是一個絕對URL。它可以通過設定一個`baseURL`便於為axios例項的方法傳遞相對URL

`transformRequest`允許在向伺服器傳送前,修改請求資料,只能用在`PUT`,`POST`和`PATCH`這幾個請求方法

`headers`是即將被髮送的自定義請求頭
headers:{`X-Requested-With`:`XMLHttpRequest`},

`params`是即將與請求一起傳送的URL引數,必須是一個無格式物件(plainobject)或URLSearchParams物件
params:{
ID:12345
},

`auth`表示應該使用HTTP基礎驗證,並提供憑據
這將設定一個`Authorization`頭,覆寫掉現有的任意使用`headers`設定的自定義`Authorization`頭
auth:{
username:`janedoe`,
password:`s00pers3cret`
},

`proxy`定義代理伺服器的主機名稱和埠
`auth`表示HTTP基礎驗證應當用於連線代理,並提供憑據
這將會設定一個`Proxy-Authorization`頭,覆寫掉已有的通過使用`header`設定的自定義`Proxy-Authorization`頭。
proxy:{
host:`127.0.0.1`,
port:9000,
auth::{
username:`mikeymike`,
password:`rapunz3l`
}
},

keep-alive

vue效能

polyfill imort引入並執行 應用場景:頁面開始一片空白
1、vue響應式原理?
2、vue-router實現原理?
3、為什麼要選vue?與其它框架對比的優勢和劣勢?
4、vue如何實現父子元件通訊,以及非父子元件通訊?
5、vuejs與angularjs以及react的區別?
6、vuex是用來做什麼的?
7、vue原始碼結構

相關文章