VUE面試題
- v-show 與 v-if 差別
- 動态綁定class的方法
- 計算屬性和 watch 的差別
- 怎樣了解單向資料流
- keep-alive
- 自定義元件的文法糖 v-model 是怎樣實作的
- 生命周期
- 元件通信
- 路由跳轉
- vue-router 有哪幾種導航鈎子
- Vue.js 2.x 雙向綁定原理
- 什麼是 MVVM，與 MVC 有什麼差別
- vuex
- this.$nextTick()
- vue的原理
- 了解Vue中的Render渲染函數
- slot插槽
v-show 與 v-if 差別
- v-hsow和v-if的差別： v-show是css切換，v-if是完整的銷毀和重新建立。
- 使用 頻繁切換時用v-show，運作時較少改變時用v-if
- v-if=‘false’ v-if是條件渲染，當false的時候不會渲染
綁定 class 的數組用法
- 對象方法
v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
- 數組方法
v-bind:class="[class1, class2]"
- 行内
v-bind:style="{color: color, fontSize: fontSize+'px' }"
計算屬性和 watch 的差別
計算屬性是自動監聽依賴值的變化，進而動态傳回内容，監聽是一個過程，在監聽的值變化時，可以觸發一個回調，并做一些事情。 是以差別來源于用法，隻是需要動态值，那就用計算屬性；需要知道值的改變後執行業務邏輯，才用 watch，用反或混用雖然可行，但都是不正确的用法。
說出一下差別會加分computed 是一個對象時，它有哪些選項？
computed 和 methods 有什麼差別？
computed 是否能依賴其它元件的資料？
watch 是一個對象時，它有哪些選項？
1. 有get和set兩個選項
2.methods是一個方法，它可以接受參數，而computed不能，computed是可以緩存的，methods不會。
3.computed可以依賴其他computed，甚至是其他元件的data
4.watch 配置 handler deep 是否深度 immeditate 是否立即執行
總結當有一些資料需要随着另外一些資料變化時，建議使用computed。 當有一個通用的響應資料變化的時候，要執行一些業務邏輯或異步操作的時候建議使用watcher
事件修飾符
- 綁定一個原生的click事件， 加native，
-
其他事件修飾符
stop prevent self
- 組合鍵 click.ctrl.exact 隻有ctrl被按下的時候才觸發
元件中 data 為什麼是函數
為什麼元件中的 data 必須是一個函數，然後 return 一個對象，而 new Vue 執行個體裡，data 可以直接是一個對象？
因為元件是用來複用的，JS 裡對象是引用關系，這樣作用域沒有隔離，而 new Vue 的執行個體，是不會被複用的，是以不存在引用對象的問題。
keep-alive
https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive
自定義元件的文法糖 v-model 是怎樣實作的
https://www.cnblogs.com/attacking-cabbage/p/10260393.html
根據官方文檔介紹，v-model本質上就是文法糖，即利用v-model綁定資料後，其實就是既綁定了資料，又添加了一個input事件監聽，如下：
怎樣了解單向資料流
這個概念出現在元件通信。父元件是通過 prop 把資料傳遞到子元件的，但是這個 prop 隻能由父元件修改，子元件不能修改，否則會報錯。子元件想修改時，隻能通過 $emit 派發一個自定義事件，父元件接收到後，由父元件修改。 一般來說，對于子元件想要更改父元件狀态的場景，可以有兩種方案： 在子元件的 data 中拷貝一份 prop，data 是可以修改的，但 prop 不能：
export default {
props: {
value: String
},
data () {
return {
currentValue: this.value
}
}
}
如果是對 prop 值的轉換，可以使用計算屬性：
export default {
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase();
}
}
}
生命周期
-
建立前後 beforeCreate/created
在beforeCreate 階段，vue執行個體的挂載元素el和資料對象data都為undefined，還未初始化。在created階段，vue執行個體的資料對象有了，el還沒有。
-
載入前後 beforeMount/mounted
在beforeMount階段，vue執行個體的$el和data都初始化了，但還是挂載之前未虛拟的DOM節點，data尚未替換。 在mounted階段，vue執行個體挂載完成，data成功渲染。
-
更新前後 beforeUpdate/updated
當data變化時，會觸發beforeUpdate和updated方法。這兩個不常用，不推薦使用。
-
銷毀前後beforeDestory/destoryed
beforeDestory是在vue執行個體銷毀前觸發，一般在這裡要通過removeEventListener解除手動綁定的事件。執行個體銷毀後，觸發的destroyed。
元件間的通信
- 父子 props/event $parent/$children ref provide/inject
- 兄弟 bus vuex
- 跨級 bus vuex provide.inject
路由的跳轉方式
一般有兩種
1.
<router-link to='home'> router-link
标簽會渲染為
<a>
标簽，咋填template中的跳轉都是這種；
2. 另一種是程式設計是導航 也就是通過js跳轉 比如
router.push('/home')
Vue.js 2.x 雙向綁定原理
這個問題幾乎是面試必問的，回答也是有深有淺。基本上要知道核心的 API 是通過
Object.defineProperty()
來劫持各個屬性的
setter / getter
，在資料變動時釋出消息給訂閱者，觸發相應的監聽回調，這也是為什麼 Vue.js 2.x 不支援 IE8 的原因（IE 8 不支援此 API，且無法通過 polyfill 實作）。
https://cn.vuejs.org/v2/guide/reactivity.html
什麼是 MVVM，與 MVC 有什麼差別
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
nextTick()
在下次 DOM 更新循環結束之後執行延遲回調。在修改資料之後，立即使用這個回調函數，擷取更新後的 DOM。
// 修改資料
vm.msg = 'Hello'
// DOM 還未更新
Vue.nextTick(function () {
// DOM 更新
})
vue的原理
https://segmentfault.com/a/1190000016434836
Vue的模式是m-v-vm模式，即（
model-view-modelView
），通過modelView作為中間層（即vm的執行個體），進行雙向資料的綁定與變化。
- 通過建立虛拟dom樹
document.createDocumentFragment()
- 一旦被監測的資料改變，會通過
Object.defineProperty
- 截取到的資料變化，進而通過訂閱——釋出者模式，觸發
Watcher
- 最後，通過更新虛拟dom的元素值，進而改變最後渲染dom樹的值，完成雙向綁定 雙向綁定的實作
object.defineProperty 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并傳回這個對象。
文法：Object.defineProperty(obj, prop, descriptor)
var obj = {};
Object.defineProperty(obj,'hello',{
get:function(){
//我們在這裡攔截到了資料
console.log("get方法被調用");
},
set:function(newValue){
//改變資料的值，攔截下來額
console.log("set方法被調用");
}
});
obj.hello//輸出為“get方法被調用”，輸出了值。
obj.hello = 'new Hello';//輸出為set方法被調用，修改了新值
我們可以做到資料的雙向綁定：
var obj = {};
Object.defineProperty(obj,'hello',{
get:function(){
//我們在這裡攔截到了資料
console.log("get方法被調用");
},
set:function(newValue){
//改變資料的值，攔截下來額
console.log("set方法被調用");
document.getElementById('test').value = newValue;
document.getElementById('test1').innerHTML = newValue;
}
});
//obj.hello;
//obj.hello = '123';
document.getElementById('test').addEventListener('input',function(e){
obj.hello = e.target.value;//觸發它的set方法
})
了解Vue中的Render渲染函數
VUE一般使用template來建立HTML，然後在有的時候，我們需要使用javascript來建立html，這時候我們需要使用render函數。
render函數return一個createElement元件中的子元素存儲在元件實列中
$slots.default
中。
return createElement('h1', this.title)
;
createElement
傳回的是包含的資訊會告訴VUE頁面上需要渲染什麼樣的節點及其子節點。我們稱這樣的節點為虛拟DOM，可以簡寫為VNode。
createElement 參數{String | Object | Function}
一個HTML标簽字元串，元件選項對象，或者一個傳回值類型為String/Object的函數。該參數是 必須的
子節點
子節點，可選，String 或 Array
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标簽名稱
this.$slots.default // 由子節點構成的數組
)
},
props: {
level: {
type: Number,
required: true
}
}
})
slot插槽
https://www.jianshu.com/p/31674b727954
https://vue.docschina.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD-scoped-slots
單個插槽當子元件模闆隻有一個沒有屬性的插槽時，父元件傳入的整個内容片段将插入到插槽所在的 DOM 位置，并替換掉插槽标簽本身。
最初在 标簽中的任何内容都被視為備用内容。備用内容在子元件的作用域内編譯，并且隻有在宿主元素為空，且沒有要插入的内容時才顯示備用内容。
命名插槽solt元素可以用一個特殊的特性name來進一步配置如何分發内容。多個插槽可以有不同的名字。 這樣可以将父元件模闆中 slot 位置，和子元件 slot 元素産生關聯，便于插槽内容對應傳遞
作用域插槽scoped slots可以通路元件内部資料的可複用插槽(reusable slot) 在父級中，具有特殊特性
slot-scope
的
<template>
元素必須存在，表示它是作用域插槽的模闆。slot-scope 的值将被用作一個臨時變量名，此變量接收從子元件傳遞過來的 prop 對象。