vue面試題，快看看

vue優勢

雙向數據綁定：在數據操做方面更爲簡單

組件化：組件的封裝和複用，開發更高效

虛擬DOM：再也不使用原生dom操做節點，原生dom操做很是耗性能

 

MVVM的理解

Model是模型層

View 是視圖層

ViewModel 介於View和Model之間，起橋樑做用，使視圖和數據既可以分離又能通訊，View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View

 

vue原理

雙向數據綁定

經過數據劫持，結合發佈訂閱模式的方式實現，達到數據和視圖同步，數據發生變化，視圖跟着變化，視圖變化，數據也隨之發生改變

虛擬DOM

用JavaScript對象來代替DOM節點

// 原始dom節點

<ul calss=‘myclass’>

  <li>初始文本</li>

</ul>

// 對象形式節點

let ul = {

  tag: ‘ul’,

  attrs: { class: ‘myclass’ },

  children: [

     tag: 'li',

     attrs: {},

     children: ['初始文本']

]

}

// 經過修改對象屬性來修改視圖

ul.children.children[0](‘修改後的文本’)

 

組件傳值

父傳子：

父組件中，用v-bind，綁定屬性值，子組件經過props接收

子傳父：

子組件經過$emit傳值，父組件經過v-on綁定的事件接收

兄弟傳值：

經過中間值，也是就在main.js文件裏，new一個vue實例實現傳值

 

Vuex的理解

是vue的狀態管理器

State: 存放數據

Getters: 監聽數據

Mutations: 提交更改數據的方法，同步

Actions: 像一個裝飾器，包裹mutations，使之能夠異步

Modules: 模塊化vuex 

mapState、mapGetters、mapActions

 

生命週期

建立前/後，載入前/後，更新前/後，銷燬前/後

beforeCreated 建立前

created 建立後

beforeMount 載入前

mounted 載入後

beforeUpdate 數據更新前

updated 數據更新後

beforeDestory 實例銷燬前

destroyed 實例銷燬後

 

父子組件得生命週期順序

渲染過程:

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新過程:

父beforeUpdate->子beforeUpdate->子updated->父updated

 

<keep-alive></keep-alive>的做用

是 vue內置組件，能夠保留其包含的組件的狀態，避免從新渲染

 

ref的做用

獲取dom元素

獲取子組件的data

調用子組件的方法

 

組件中key的做用

key是節點惟一標識，方便diff算法識別節點，高效更新虛擬dom

 

組件中name的做用

在dev-tools中使用，dev-tools中是以組件name進行顯示的

配合keep-alive對組件緩存作限制

 

組件中data爲何必須是一個函數

寫成函數，複用組件時，都會返回一份新的data，至關於每一個組件都有私有的數據空間，各自維護數據，不會形成混亂。而寫成對象形式，至關於全部組件共用一個data，會牽一髮而動全身

 

$nextTick的使用

created() 鉤子內進行的dom操做必定要放在vue.nextTick() 的回調函數中，created() 執行時dom實際並未渲染，此時進行dom操做是徒勞的，nextTick正好解決了這一問題

 

路由的模式

hash模式：即地址欄url中的#符號
history模式：利用了 html5中window.history新增的 pushState() 、replaceState() 方法

 

路由的導航鉤子

全局導航鉤子：router.beforeEach(to,from,next)，即路由守衛
組件內的鉤子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

 

路由懶加載的實現方式
使用import，實現懶加載
webpack提供的方法，實現懶加載

 

路由傳參方式

path後添加id

使用路由name匹配路由，經過params傳遞參數

使用path匹配路由，經過query傳遞參數

第一種方式，頁面刷新參數會丟失，而其餘兩種不會

 

v-show、v-if的區別

v-show本質是控制樣式的顯示和隱藏

v-if是動態添加或者刪除DOM元素，不停的銷燬和建立更耗性能

 

less、scss申明變量方式

less用@符申明和使用變量

scss用$符申明和使用變量