VUE面試題

v-show 與 v-if 區(qū)別

動態(tài)綁定class的方法

計(jì)算屬性和 watch 的區(qū)別

怎樣理解單向數(shù)據(jù)流

keep-alive

自定義組件的語法糖 v-model 是怎樣實(shí)現(xiàn)的

生命周期

組件通信

路由跳轉(zhuǎn)

vue-router 有哪幾種導(dǎo)航鉤子

Vue.js 2.x 雙向綁定原理

什么是 MVVM，與 MVC 有什么區(qū)別

vuex

this.$nextTick()

vue的原理

理解Vue中的Render渲染函數(shù)

slot插槽

v-show 與 v-if 區(qū)別

v-hsow和v-if的區(qū)別： v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建。

使用 頻繁切換時用v-show，運(yùn)行時較少改變時用v-if

v-if=‘false’ v-if是條件渲染，當(dāng)false的時候不會渲染

綁定 class 的數(shù)組用法

• 對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 數(shù)組方法 v-bind:class="[class1, class2]"
• 行內(nèi) v-bind:style="{color: color, fontSize: fontSize+'px' }"

計(jì)算屬性和 watch 的區(qū)別

計(jì)算屬性是自動監(jiān)聽依賴值的變化，從而動態(tài)返回內(nèi)容，監(jiān)聽是一個過程，在監(jiān)聽的值變化時，可以觸發(fā)一個回調(diào)，并做一些事情。 所以區(qū)別來源于用法，只是需要動態(tài)值，那就用計(jì)算屬性；需要知道值的改變后執(zhí)行業(yè)務(wù)邏輯，才用 watch，用反或混用雖然可行，但都是不正確的用法。

說出一下區(qū)別會加分

computed 是一個對象時，它有哪些選項(xiàng)？ computed 和 methods 有什么區(qū)別？ computed 是否能依賴其它組件的數(shù)據(jù)？ watch 是一個對象時，它有哪些選項(xiàng)？

有g(shù)et和set兩個選項(xiàng)

methods是一個方法，它可以接受參數(shù)，而computed不能，computed是可以緩存的，methods不會。

computed可以依賴其他computed，甚至是其他組件的data

watch 配置

handler deep 是否深度 immeditate 是否立即執(zhí)行

總結(jié)

當(dāng)有一些數(shù)據(jù)需要隨著另外一些數(shù)據(jù)變化時，建議使用computed。 當(dāng)有一個通用的響應(yīng)數(shù)據(jù)變化的時候，要執(zhí)行一些業(yè)務(wù)邏輯或異步操作的時候建議使用watcher

事件修飾符

• 綁定一個原生的click事件， 加native，
• 其他事件修飾符
• stop prevent self
• 組合鍵 click.ctrl.exact 只有ctrl被按下的時候才觸發(fā)

組件中 data 為什么是函數(shù)

為什么組件中的 data 必須是一個函數(shù)，然后 return 一個對象，而 new Vue 實(shí)例里，data 可以直接是一個對象？

因?yàn)榻M件是用來復(fù)用的，JS 里對象是引用關(guān)系，這樣作用域沒有隔離，而 new Vue 的實(shí)例，是不會被復(fù)用的，因此不存在引用對象的問題。

keep-alive

http://cn.vuejs.org/v2/guide/co…

自定義組件的語法糖 v-model 是怎樣實(shí)現(xiàn)的

http://www.cnblogs.com/attacking-c…

根據(jù)官方文檔介紹，v-model本質(zhì)上就是語法糖，即利用v-model綁定數(shù)據(jù)后，其實(shí)就是既綁定了數(shù)據(jù)，又添加了一個input事件監(jiān)聽，如下：

怎樣理解單向數(shù)據(jù)流

這個概念出現(xiàn)在組件通信。父組件是通過 prop 把數(shù)據(jù)傳遞到子組件的，但是這個 prop 只能由父組件修改，子組件不能修改，否則會報(bào)錯。子組件想修改時，只能通過 $emit 派發(fā)一個自定義事件，父組件接收到后，由父組件修改。 一般來說，對于子組件想要更改父組件狀態(tài)的場景，可以有兩種方案： 在子組件的 data 中拷貝一份 prop，data 是可以修改的，但 prop 不能：

export default {props: {value: String},data () {return {currentValue: this.value}} } 復(fù)制代碼

如果是對 prop 值的轉(zhuǎn)換，可以使用計(jì)算屬性：

export default {props: ['size'],computed: {normalizedSize: function () {return this.size.trim().toLowerCase();}} } 復(fù)制代碼

生命周期

• 創(chuàng)建前后 beforeCreate/created
• 在beforeCreate 階段，vue實(shí)例的掛載元素el和數(shù)據(jù)對象data都為undefined，還未初始化。在created階段，vue實(shí)例的數(shù)據(jù)對象有了，el還沒有。
• 載入前后 beforeMount/mounted
• 在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前未虛擬的DOM節(jié)點(diǎn)，data尚未替換。 在mounted階段，vue實(shí)例掛載完成，data成功渲染。
• 更新前后 beforeUpdate/updated
• 當(dāng)data變化時，會觸發(fā)beforeUpdate和updated方法。這兩個不常用，不推薦使用。
• 銷毀前后beforeDestory/destoryed
• beforeDestory是在vue實(shí)例銷毀前觸發(fā)，一般在這里要通過removeEventListener解除手動綁定的事件。實(shí)例銷毀后，觸發(fā)的destroyed。

組件間的通信

父子 props/event $parent/$children ref provide/inject

兄弟 bus vuex

跨級 bus vuex provide inject

路由的跳轉(zhuǎn)方式

一般有兩種

<router-link to='home'> router-link標(biāo)簽會渲染為<a>標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種；

另一種是編程是導(dǎo)航 也就是通過js跳轉(zhuǎn) 比如 router.push('/home')

Vue.js 2.x 雙向綁定原理

這個問題幾乎是面試必問的，回答也是有深有淺。基本上要知道核心的 API 是通過 Object.defineProperty() 來劫持各個屬性的setter / getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，這也是為什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且無法通過 polyfill 實(shí)現(xiàn)）。 http://cn.vuejs.org/v2/guide/re…

什么是 MVVM，與 MVC 有什么區(qū)別

http://www.ruanyifeng.com/blog/2015/0…

nextTick()

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后，立即使用這個回調(diào)函數(shù)，獲取更新后的 DOM。

// 修改數(shù)據(jù) vm.msg = 'Hello' // DOM 還未更新 Vue.nextTick(function () {// DOM 更新 }) 復(fù)制代碼

vue的原理

http://segmentfault.com/a/119000001…

Vue的模式是m-v-vm模式，即（model-view-modelView），通過modelView作為中間層（即vm的實(shí)例），進(jìn)行雙向數(shù)據(jù)的綁定與變化。通過建立虛擬dom樹document.createDocumentFragment(),方法創(chuàng)建虛擬dom樹。

一旦被監(jiān)測的數(shù)據(jù)改變，會通過Object.defineProperty定義的數(shù)據(jù)攔截，截取到數(shù)據(jù)的變化。

截取到的數(shù)據(jù)變化，從而通過訂閱——發(fā)布者模式，觸發(fā)Watcher（觀察者）,從而改變虛擬dom的中的具體數(shù)據(jù)。

最后，通過更新虛擬dom的元素值，從而改變最后渲染dom樹的值，完成雙向綁定 雙向綁定的實(shí)現(xiàn)

object.defineProperty 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。 語法：Object.defineProperty(obj, prop, descriptor) var obj = {}; Object.defineProperty(obj,'hello',{get:function(){//我們在這里攔截到了數(shù)據(jù)console.log("get方法被調(diào)用");},set:function(newValue){//改變數(shù)據(jù)的值，攔截下來額console.log("set方法被調(diào)用");} }); obj.hello//輸出為“get方法被調(diào)用”，輸出了值。 obj.hello = 'new Hello';//輸出為set方法被調(diào)用，修改了新值 復(fù)制代碼

我們可以做到數(shù)據(jù)的雙向綁定：

var obj = {}; Object.defineProperty(obj,'hello',{get:function(){//我們在這里攔截到了數(shù)據(jù)console.log("get方法被調(diào)用");},set:function(newValue){//改變數(shù)據(jù)的值，攔截下來額console.log("set方法被調(diào)用");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;//觸發(fā)它的set方法 }) 復(fù)制代碼

理解Vue中的Render渲染函數(shù)

http://www.cnblogs.com/tugenhua070…

VUE一般使用template來創(chuàng)建HTML，然后在有的時候，我們需要使用javascript來創(chuàng)建html，這時候我們需要使用render函數(shù)。

render函數(shù)return一個createElement組件中的子元素存儲在組件實(shí)列中 $slots.default 中。

return createElement('h1', this.title); createElement返回的是包含的信息會告訴VUE頁面上需要渲染什么樣的節(jié)點(diǎn)及其子節(jié)點(diǎn)。我們稱這樣的節(jié)點(diǎn)為虛擬DOM，可以簡寫為VNode。

createElement 參數(shù)

{String | Object | Function} 復(fù)制代碼

一個HTML標(biāo)簽字符串，組件選項(xiàng)對象，或者一個返回值類型為String/Object的函數(shù)。該參數(shù)是 必須的

子節(jié)點(diǎn)

子節(jié)點(diǎn)，可選，String 或 Array

Vue.component('anchored-heading', {render: function (createElement) {return createElement('h' + this.level, // 標(biāo)簽名稱this.$slots.default // 由子節(jié)點(diǎn)構(gòu)成的數(shù)組)},props: {level: {type: Number,required: true}} }) 復(fù)制代碼

slot插槽

http://www.jianshu.com/p/31674b727…

http://vue.docschina.org/v2/guide/co…

單個插槽

當(dāng)子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內(nèi)容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標(biāo)簽本身。

最初在 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒有要插入的內(nèi)容時才顯示備用內(nèi)容。

命名插槽

solt元素可以用一個特殊的特性name來進(jìn)一步配置如何分發(fā)內(nèi)容。多個插槽可以有不同的名字。 這樣可以將父組件模板中 slot 位置，和子組件 slot 元素產(chǎn)生關(guān)聯(lián)，便于插槽內(nèi)容對應(yīng)傳遞

作用域插槽scoped slots

可以訪問組件內(nèi)部數(shù)據(jù)的可復(fù)用插槽(reusable slot) 在父級中，具有特殊特性 slot-scope 的<template> 元素必須存在，表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象。

如果喜歡，給個贊啦~

總結(jié)

以上是生活随笔為你收集整理的antd vue 树更新数据后不展开_很全面的vue面试题总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。