經(jīng)常會被問及的 Vue 面試題（上）
0.前言
原文有 36 道 vue 常用面試題，考慮到太多一次也看不完，所以分為?上、中、下三篇，如果你能讀完這三篇文章，相信你在面試中 vue 的問題你不會怕了。
1.頁面中定義一個定時器，在哪個階段清除？
答案：在 beforeDestroy 中銷毀定時器。
① 為什么銷毀它：
在頁面 a 中寫了一個定時器，比如每隔一秒鐘打印一次 1，當我點擊按鈕進入頁面 b 的時候，會發(fā)現(xiàn)定時器依然在執(zhí)行，這是非常消耗性能的。
② 解決方案 1：
mounted(){
this.timer = setInterval(()=>{
console.log(1)
},1000)
},
beforeDestroy(){
clearInterval(this.timer)
}
方案 1 有兩點不好的地方，引用尤大的話來說就是：
它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴重的問題，但是它可以被視為雜物。
我們的建立代碼獨立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。
方案 2（推薦）：該方法是通過$once 這個事件偵聽器在定義完定時器之后的位置來清除定時器
mounted(){
const timer = setInterval(()=>{
console.log(1)
},1000)
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer)
})
}
官網(wǎng)參考鏈接:https://cn.vuejs.org/v2/guide/components-edge-cases.html
2.父組件如何獲取子組件的數(shù)據(jù)，子組件如何獲取父組件的數(shù)據(jù)，父子組件如何傳值？
① 先說，父組件如何主動獲取子組件的數(shù)據(jù)？
方案 1：$children
$children 用來訪問子組件實例，要知道一個組件的子組件可能是不唯一的，所以它的返回值是數(shù)組。
現(xiàn)在，我們定義 Header，HelloWorld 兩個組件
<div class="index">
<Header>Header>
<HelloWorld :message="message">HelloWorld>
<button @click="goPro">跳轉button>
div>
template>
mounted(){
console.log(this.$children)
}
打印的是一個數(shù)組，可以用 foreach 分別得到所需要的的數(shù)據(jù)
缺點：
無法確定子組件的順序，也不是響應式的。如果你確切的知道要訪問子組件建議使用$refs。
方案 2 ：$refs
"hello" :message="message">HelloWorld>
調(diào)用 helloworld 子組件的時候直接定義一個 ref，這樣就可以通過 this.$refs 獲取所需要的的數(shù)據(jù)。
this.$refs.hello.屬性
this.$refs.hello.方法
② 子組件如何主動獲取父組件中的數(shù)據(jù)？
通過 ：$parent
children 類似
this.$parent.屬性
this.$parent.方法
父子組件通信除了以上三種，還有 props 和?attrs
③inheritAttrs
這是@2.4 新增的屬性和接口。inheritAttrs 屬性控制子組件 html 屬性上是否顯示父組件的提供的屬性。
如果我們將父組件 Index 中的屬性 desc、keysword、message 三個數(shù)據(jù)傳遞到子組件 HelloWorld 中的話，如下
父組件 Index 部分
"hello" :desc="desc" :keysword="keysword" :message="message">HelloWorld>
子組件：HelloWorld，props 中只接受了 message
props: {
message: String
},
實際情況，我們只需要 message，那其他兩個屬性則會被當做普通的 html 元素插在子組件的根元素上。
如圖
這樣做會使組件預期功能變得模糊不清，這個時候，在子組件中寫入，inheritAttrs：false ，這些沒用到的屬性便會被去掉，true 的話，就會顯示。
如果，父組件中沒被需要的屬性，跟子組件本來的屬性沖突的時候，則依據(jù)父組件
"hello" type="text" :message="message">HelloWorld>
子組件：HelloWorld
<input type="number">
template>
這個時候父組件中 type=“text”，而子組件中 type=”number”,而實際中最后顯示的是 type=”text”，這并不是我們想要的，所以只要設置：inheritAttrs：false，type 便會成為 number
上述這些沒被用到的屬性，如何被獲取呢？這就用到了$attrs
③$attrs
作用：可以獲取到?jīng)]有使用的注冊屬性，如果需要，我們在這也可以往下繼續(xù)傳遞。
就上上述沒有被用到的 desc 和 keysword 就能通過$attrs 獲取到。
通過$attrs 的這個特性可以父組件傳遞到孫組件，免除父組件傳遞到子組件，再從子組件傳遞到孫組件的麻煩
代碼如下 父組件 Index 部分
class="index">
<HelloWorld ref="hello" :desc="desc" :keysword="keysword" :message="message">HelloWorld>
div>
data(){
return{
message:'首頁',
desc:'首頁描述',
keysword:'我是關鍵詞key'
}
},
子組件 HelloWorld 部分
class="hello">
<sunzi v-bind="$attrs">sunzi>
<button @click="aa">獲取父組件的數(shù)據(jù)button>
div>
孫子組件 sunzi 部分
<div class="header">
{{$attrs}}
<br>
div>
template>
可以看出通過 v-bind=”$attrs”將數(shù)據(jù)傳到孫組件中
除了以上，provide / inject 也適用于 隔代組件通信，尤其是獲取祖先組件的數(shù)據(jù)，非常方便。
簡單的說，當組件的引入層次過多，我們的子孫組件想要獲取祖先組件的資源，那么怎么辦呢，總不能一直取父級往上吧，而且這樣代碼結構容易混亂。這個就是 provide / inject 要干的事情。
<div>
<childOne>childOne>
div>
template>
<script>
import childOne from '../components/test/ChildOne'
export default {
name: "Parent",
provide: {
for: "demo"
},
components:{
childOne
}
}
在這里我們在父組件中 provide for 這個變量，然后直接設置三個組件（childOne、childTwo 、childThird）并且一層層不斷內(nèi)嵌其中， 而在最深層的 childThird 組件中我們可以通過 inject 獲取 for 這個變量
<div>
{{demo}}
div>
template>
<script>
export default {
name: "",
inject: ['for'],
data() {
return {
demo: this.for
}
}
}
script>
3.自定義指令如何定義，它的生命周期是什么？
通過 Vue.directive() 來定義全局指令
有幾個可用的鉤子（生命周期）, 每個鉤子可以選擇一些參數(shù). 鉤子如下:
bind: 一旦指令附加到元素時觸發(fā)
inserted: 一旦元素被添加到父元素時觸發(fā)
update: 每當元素本身更新(但是子元素還未更新)時觸發(fā)
componentUpdate: 每當組件和子組件被更新時觸發(fā)
unbind: 一旦指令被移除時觸發(fā)。
bind 和 update 也許是這五個里面最有用的兩個鉤子了
每個鉤子都有 el, binding, 和 vnode 參數(shù)可用.
update 和 componentUpdated 鉤子還暴露了 oldVnode, 以區(qū)分傳遞的舊值和較新的值.
el 就是所綁定的元素.
binding 是一個保護傳入鉤子的參數(shù)的對象. 有很多可用的參數(shù), 包括 name, value, oldValue, expression, arguments, arg 及修飾語.
vnode 有一個更不尋常的用例, 它可用于你需要直接引用到虛擬 DOM 中的節(jié)點.
binding 和 vnode 都應該被視為只讀.
現(xiàn)在，自定義一個指令，添加一些樣式，表示定位的距離
Vue.directive('tack',{
bind(el,binding){
el.style.position='fixed';
el.style.top=binding.value + 'px'
}
})
class="header" v-tack="10" >我是header</div>
假設我們想要區(qū)分從頂部或者左側偏移 70px, 我們可以通過傳遞一個參數(shù)來做到這一點
Vue.directive('tack', {
bind(el, binding, vnode) {
el.style.position = 'fixed';
const s = (binding.arg === 'left' ? 'left' : 'top');
el.style[s] = binding.value + 'px';
}
})
也可以同時傳入不止一個值
Vue.directive('tack', {
bind(el, binding, vnode) {
el.style.position = 'fixed';
el.style.top = binding.value.top + 'px';
el.style.left = binding.value.left + 'px';
}
})
class="header" v-tack="{left:’20’,top:’20’}" >我是header</div>
4、vue 生命周期，各個階段簡單講一下？
breforeCreate（）：實例創(chuàng)建前，這個階段實例的 data 和 methods 是讀不到的。
created（）：實例創(chuàng)建后，這個階段已經(jīng)完成數(shù)據(jù)觀測，屬性和方法的運算，watch/event 事件回調(diào)，mount 掛載階段還沒有開始。$el 屬性目前不可見，數(shù)據(jù)并沒有在 DOM 元素上進行渲染。
created 完成之后，進行 template 編譯等操作，將 template 編譯為 render 函數(shù)，有了 render 函數(shù)后才會執(zhí)行 beforeMount（）
beforeMount（）：在掛載開始之前被調(diào)用：相關的 render 函數(shù)首次被調(diào)用
mounted（）：掛載之后調(diào)用，el 選項的 DOM 節(jié)點被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用此生命周期函數(shù)，此時實例的數(shù)據(jù)在 DOM 節(jié)點上進行渲染
后續(xù)的鉤子函數(shù)執(zhí)行的過程都是需要外部的觸發(fā)才會執(zhí)行
有數(shù)據(jù)的變化，會調(diào)用 beforeUpdate，然后經(jīng)過 Virtual Dom，最后 updated 更新完畢，當組件被銷毀的時候，會調(diào)用 beforeDestory，以及 destoryed。
5、watch 和 computed 的區(qū)別？
computed：
① 有緩存機制；② 不能接受參數(shù)；③ 可以依賴其他 computed，甚至是其他組件的 data；④ 不能與 data 中的屬性重復
watch：
① 可接受兩個參數(shù)；② 監(jiān)聽時可觸發(fā)一個回調(diào)，并做一些事情；③ 監(jiān)聽的屬性必須是存在的；④ 允許異步
watch 配置：handler、deep（是否深度）、immeditate （是否立即執(zhí)行）
總結：
當有一些數(shù)據(jù)需要隨著另外一些數(shù)據(jù)變化時，建議使用 computed
當有一個通用的響應數(shù)據(jù)變化的時候，要執(zhí)行一些業(yè)務邏輯或異步操作的時候建議使用 watch
6、請說一下 computed 中的 getter 和 setter
① computed 中可以分成 getter（讀?。?和 setter（設值）
② 一般情況下是沒有 setter 的，computed 預設只有 getter ，也就是只能讀取，不能改變設值。
一、默認只有 getter 的寫法
"demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
//其實fullName的完整寫法應該是如下：
fullName: {
get(){
return this.firstName + ' ' + this.lastName
}
}
注意：不是說我們更改了 getter 里使用的變量，就會觸發(fā) computed 的更新，前提是 computed 里的值必須要在模板里使用才行。如果將{{fullName}}去掉，get（）方法是不會觸發(fā)的。
二、setter 的寫法，可以設值
{{ fullName }}
var vm = new Vue({
el: '#demo',
data: {
firstName: 'zhang',
lastName: 'san'
},
computed: {
fullName: {
//getter 方法
get(){
console.log('computed getter...')
return this.firstName + ' ' + this.lastName
}，
//setter 方法
set(newValue){
console.log('computed setter...')
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
return this.firstName + ' ' + this.lastName
}
}
}
})
在這里，我們修改 fullName 的值，就會觸發(fā) setter，同時也會觸發(fā) getter。
注意：并不是觸發(fā)了 setter 也就會觸發(fā) getter，他們兩個是相互獨立的。我們這里修改了 fullName 會觸發(fā) getter 是因為 setter 函數(shù)里有改變 firstName 和 lastName 值的代碼，這兩個值改變了，fullName 依賴于這兩個值，所以便會自動改變。
7、導航鉤子有哪幾種，分別如何用，如何將數(shù)據(jù)傳入下一個點擊的路由頁面？
① 全局導航守衛(wèi)
前置守衛(wèi)
router.beforeEach((to, from, next) => {
// do someting
});
后置鉤子（沒有 next 參數(shù)）
router.afterEach((to, from) => {
// do someting
});
② 路由獨享守衛(wèi)
cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
順便看一下路由里面的參數(shù)配置：
③ 組件內(nèi)的導航鉤子
組件內(nèi)的導航鉤子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內(nèi)部直接進行定義的
beforeRouteEnter
data(){
return{
pro:'產(chǎn)品'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log(to)
next(vm => {
console.log(vm.pro)
})
}
注：beforeRouteEnter 不能獲取組件實例 this，因為當守衛(wèi)執(zhí)行前，組件實例被沒有被創(chuàng)建出來，我們可以通過給 next 傳入一個回調(diào)來訪問組件實例。在導航被確認時，會執(zhí)行這個回調(diào)，這時就可以訪問組件實例了
僅僅是 beforRouteEnter 支持給 next 傳遞回調(diào)，其他兩個并不支持，因為剩下兩個鉤子可以正常獲取組件實例 this
如何通過路由將數(shù)據(jù)傳入下一個跳轉的頁面呢？
答：params 和 query
params
傳參
this.$router.push({
name:"detail",
params:{
name:'xiaoming',
}
});
接受
this.$route.params.name
query
傳參
this.$router.push({
path:'/detail',
query:{
name:"xiaoming"
}
})
接受 //接收參數(shù)是this.$route
this.$route.query.id
那 query 和 params 什么區(qū)別呢？
① params 只能用 name 來引入路由，query 既可以用 name 又可以用 path（通常用 path）
② params 類似于 post 方法，參數(shù)不會再地址欄中顯示
query 類似于 get 請求，頁面跳轉的時候，可以在地址欄看到請求參數(shù)
那剛才提到的 this.route 有何區(qū)別？
先打印出來看一下
?router.push 方法
$route 為當前 router 跳轉對象，里面可以獲取 name、path、query、params 等
8、es6 的特有的類型， 常用的操作數(shù)組的方法都有哪些？
es6 新增的主要的特性：
① let const 兩者都有塊級作用域
② 箭頭函數(shù)
③ 模板字符串
④ 解構賦值
⑤ for of 循環(huán)
⑥ import 、export 導入導出
⑦ set 數(shù)據(jù)結構
⑧ ...展開運算符
⑨ 修飾器 @
⑩ class 類繼承
? async、await
? promise
? Symbol
? Proxy 代理
操作數(shù)組常用的方法：
es5：concat 、join 、push、pop、shift、unshift、slice、splice、substring 和 substr 、sort、 reverse、indexOf 和 lastIndexOf 、every、some、filter、map、forEach、reduce
es6：find、findIndex、fill、copyWithin、Array.from、Array.of、entries、values、key、includes
9、vue 雙向綁定原理？
通過 Object.defineProperty()來劫持各個屬性的 setter,getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調(diào)
10、vue-router 的實現(xiàn)原理，history 和 hash 模式有什么區(qū)別？
vue-router 有兩種模式，hash 模式和 history 模式
hash 模式
url 中帶有#的便是 hash 模式，#后面是 hash 值，它的變化會觸發(fā) hashchange 這個事件。
通過這個事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽 hashchange 來實現(xiàn)更新頁面部分內(nèi)容的操作：
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
另外，hash 值的變化，并不會導致瀏覽器向服務器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。
history 模式
history api 可以分為兩大部分，切換和修改
① 切換歷史狀態(tài)
包括 back,forward,go 三個方法，對應瀏覽器的前進，后退，跳轉操作
history.go(-2);//后退兩次
history.go(2);//前進兩次
history.back(); //后退
hsitory.forward(); //前進
② 修改歷史狀態(tài)
包括了 pushState,replaceState 兩個方法,這兩個方法接收三個參數(shù):stateObj,title,url
history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
console.log(event.state)
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
}
}
history.back();
history.forward();
通過 pushstate 把頁面的狀態(tài)保存在 state 對象中，當頁面的 url 再變回這個 url 時，可以通過 event.state 取到這個 state 對象，從而可以對頁面狀態(tài)進行還原，這里的頁面狀態(tài)就是頁面字體顏色，其實滾動條的位置，閱讀進度，組件的開關的這些頁面狀態(tài)都可以存儲到 state 的里面。
history 缺點：
1：hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如http://www.a12c.com,因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
2：history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致。如http://www.a12c.com/book/a。如果后端缺少對/book/a 的路由處理，將返回 404 錯誤
作者：東起?
鏈接：https://zhuanlan.zhihu.com/p/103763164
瀏覽
1
評論圖片表情
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>