Ⅰ 三十七個常見Vue面試題
映射關系簡化，隱藏controller MVVM在MVC的基礎上，把控制層隱藏掉了。
Vue不是一個MVVM框架，它是一個視圖層框架。
ViewModal是一個橋梁，將數據和視圖進行關聯。
數組和對象類型的值變化的時候，通過defineReactive方法，藉助了defineProperty，將所有的屬性添加了getter和setter。用戶在取值和設置的時候，可以進行一些操作。
缺陷：只能監控最外層的屬性，如果是多層的，就要進行全量遞歸。
get裡面會做依賴搜集（dep[watcher, watcher]） set裡面會做數據更新（notify，通知watcher更新）
vue中對數組沒有進行defineProperty，而是重寫了數組的7個方法。 分別是：
因為這些方法都會改變數組本身。
數組里的索引和長度是無法被監控的。
Vue初始化的時候，掛載之後會進行編譯。生成renderFunction。
當取值的時候，就會搜集watcher，放到dep裡面。
當用戶更改值的時候，就會通知watcher，去更新視圖。
這個問題的核心是如何將template轉換成render函數。
Vue的生命周期鉤子是回調函數，當創建組件實例的過程中會調用相應的鉤子方法。 內部會對鉤子進行處理，將鉤子函數維護成數組的形式。
Vue的mixin的作用就是抽離公共的業務邏輯，原理類似對象的繼承，當組件初始化的時候，會調用mergeOptions方法進行合並，採用策略模式針對不同的屬性進行合並。 如果混入的數據和本身組件的數據有沖突，採用本身的數據為准。
缺點：命名沖突、數據來源不清晰
new Vue是一個單例模式，不會有任何的合並操作，所以根實例不必校驗data一定是一個函數。 組件的data必須是一個函數，是為了防止兩個組件的數據產生污染。 如果都是對象的話，會在合並的時候，指向同一個地址。 而如果是函數的時候，合並的時候調用，會產生兩個空間。
nextTick是一個微任務。
Vue的diff演算法是平級比較，不考慮跨級比較的情況。內部採用深度遞歸的方式+雙指針方式比較
所以採用watcher + Diff演算法來檢測差異。
產生組件虛擬節點 -> 創建組件的真實節點 -> 插入到頁面
屬性更新會觸發patchVnode方法，組件的虛擬節點會調用prepatch鉤子，然後更新屬性，更新組件。
先渲染非同步佔位符節點 -> 組件載入完畢後調用forceUpdate強制更新。
正常的一個組件是一個類繼承了Vue。
函數式組件，就是一個普通的函數。
主要作用是為了實現批量傳遞數據。
provide/inject更適合應用在插件中，主要實現跨級數據傳遞。
首先，v-for和v-if 不能在同一個標簽中使用。
先處理v-for，再處理v-if。
如果同時遇到的時候，應該考慮先用計算屬性處理數據，在進行v-for，可以減少循環次數。
在組件上用的v-model，是model和callback
在普通元素上用v-model，會生成指令，還可能因為不同的元素：
指令在什麼時候會調用？
源碼：
普通插槽是渲染後做替換的工作。父組件渲染完畢後，替換子組件的內容。
在模板編譯的時候，處理組件中的子節點和slot標簽
在創建元素的時候，用_t()方法方法來替換_v()的內容。
作用域插槽可以拿到子組件裡面的屬性。在子組件中傳入屬性然後渲染。
作用域插槽的編譯結果：
Vue.use是用來使用插件的。我們可以在插件中擴展全局組件、指令、原型方法等。 會調用install方法將Vue的構建函數默認傳入，在插件中可以使用vue，無需依賴vue庫
使用有兩個場景，一個是動態組件，一個是router-view
這里創建了一個白名單和一個黑名單。表明哪些需要需要做緩存，哪些不需要做緩存。以及最大的緩存個數。
緩存的是組件的實例，用key和value對象保存。
載入的時候，監控include和exclude。
如果不需要緩存，直接返回虛擬節點。
如果需要緩存，就用組件的id和標簽名，生成一個key，把當前vnode的instance作為value，存成一個對象。這就是緩存列表
如果設置了最大的緩存數，就刪除第0個緩存。新增最新的緩存。
並且給組件添加一個keepAlive變數為true，當組件初始化的時候，不再初始化。
鉤子函數有三種：
Vuex是專門為vue提供的全局狀態管理系統，用於多個組件中的數據共享、數據緩存。
問題：無法持久化。
Ⅱ vue常見面試題
1.什麼是vue的生命周期？
Vue實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載DOM->渲染、更新->渲染、卸載等一系列過程，我們稱這是Vue的生命周期。
2.vue生命周期的作用是什麼？
它的生命周期中有多個事件鉤子，讓我們在控制整個vue實例的過程時更容易形成好的邏輯。
3.Vue生命周期總共有幾個階段？
它可以總共分為8個階段：創建前/後,載入前/後，更新前/後，銷毀前/銷毀後
4.第一次頁面載入會觸發那幾個鉤子？
第一次頁面載入時會觸發beforeCreate,created,beforeMount,mounted
5.DOM渲染在哪個周期中就已經完成？
DOM渲染在mounted中就已經完成了
6.生命周期鉤子的一些使用方法：
1.beforecreate:可以在加個loading事件，在載入實例是觸發
2.created:初始化完成時的事件寫在這里，如在這結束loading事件，非同步請求也適宜在這里調用
3.mounted:掛載元素，獲取到dom節點
4.updated:如果對數據統一處理，在這里寫上相應函數
5.beforeDestroy:可以一個確認停止事件的確認框
6.nextTick:更新數據後立即操作dom
7.v-show與v-if的區別
v-show是css切換，v-if是完整的銷毀和重新創建
使用頻繁切換時用v-show,運行時較少改變時用v-if
V-if=』false』v-if是條件渲染，當false的時候不會渲染
使用v-if的時候，如果值為false，那麼頁面將不會有這個html標簽生成
v-show則是不管值是為true還是false，html元素都會存在，只是css中的display顯示或隱藏
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。
8.開發中常用的指令有哪些?
v-model:一般用在表達輸入，很輕松的實現表單控制項和數據的雙向綁定
v-html：更新元素的innerHTML
v-show與v-if：條件渲染，注意二者區別
v-on:click:可以簡寫為@click,@綁定一個事件。如果事件觸發了，就可以指定事件的處理函數
v-for：基於源數據多次渲染元素或模板
v-bind:當表達式的值改變時，將其產生的連帶影響，響應式地作用於DOM語法
v-bind:title=」msg」簡寫：title="msg"
9.綁定class的數組用法
1.對象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}」
2.數組方法v-bind:class="[class1,class2]"
3.行內v-bind:style="{color:color,fontSize:fontSize+'px'}」
10.路由跳轉方式
1.router-link標簽會渲染為標簽，咋填template中的跳轉都是這種；
2.另一種是編輯是導航，也就是通過js跳轉比如router.push('/home')
12. computed和watch有什麼區別
computed
computed是計算屬性，也就是計算值，它更多用於計算值的場景
computed具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時重新調用對應的getter來計算
computed適用於計算比較消耗性能的計算場景
watch
watch更多的是[觀察]的作用，類似於某些數據的監聽回調，用於觀察props $emit或者本組件的值，當數據變化時來執行回調進行後續操作
無緩存性，頁面重新渲染時值不變化也會執行
小結
當我們要進行數值計算，而且依賴於其他數據，那麼把這個數據設計為computed
如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化。
13. vue組件的scoped屬性的作用
在style標簽上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有化的目的；
但是也得慎用：樣式不易（可）修改，而很多時候，我們是需要對公共組件的樣式做微調的；
解決辦法：
①：使用混合型的css樣式：（混合使用全局跟本地的樣式） /* 全局樣式 */ /* 本地樣式 */
②：深度作用選擇器（>>>）如果你希望 scoped 樣式中的一個選擇器能夠作用得「更深」，例如影響子組件，你可以使用 >>> 操作符： .a >>> .b { /* ... */ }
14. vue是漸進式的框架的理解：( 主張最少,沒有多做職責之外的事 )
Vue的核心的功能，是一個視圖模板引擎，但這不是說Vue就不能成為一個框架。如下圖所示，這里包含了Vue的所有部件，在聲明式渲染（視圖模板引擎）的基礎上，我們可以通過添加組件系統、客戶端路由、大規模狀態管理來構建一個完整的框架。更重要的是，這些功能相互獨立，你可以在核心功能的基礎上任意選用其他的部件，不一定要全部整合在一起。可以看到，所說的「漸進式」，其實就是Vue的使用方式，同時也體現了Vue的設計的理念
在我看來，漸進式代表的含義是：主張最少。視圖模板引擎
每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：
必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）
所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。
Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。
漸進式的含義，我的理解是：沒有多做職責之外的事。
15.vue.js的兩個核心是什麼(數據驅動、組件系統。)
數據驅動:Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基於依賴收集的觀測機制,核心是VM，即ViewModel，保證數據和視圖的一致性。
16.vue常用修飾符
修飾符分為：一般修飾符，事件修身符，按鍵、系統
①一般修飾符：
.lazy：v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步
<inputv-model.lazy="msg">
.number
<inputv-model.number="age"type="number">
.trim
1.如果要自動過濾用戶輸入的首尾空白字元<inputv-model.trim='trim'>
② 事件修飾符
<av-on:click.stop="doThis"></a><!-- 阻止單擊事件繼續傳播 -->
<formv-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重載頁面 -->
<av-on:click.stop.prevent="doThat"></a> <!-- 修飾符可以串聯 -->
<formv-on:submit.prevent></form> <!-- 只有修飾符 -->
<divv-on:click.capture="doThis">...</div> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -->
<divv-on:click.self="doThat">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 -->
<av-on:click.once="doThis"></a> <!-- 點擊事件將只會觸發一次 -->
③按鍵修飾符
全部的按鍵別名:
.enter.tab.delete(捕獲「刪除」和「退格」鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta
<inputv-on:keyup.enter="submit">或者<[email protected]="submit">
④系統修飾鍵 （可以用如下修飾符來實現僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的監聽器。）
.ctrl.alt.shift.meta
<[email protected]="clear">或者<[email protected]="doSomething">Dosomething</div><!-- Ctrl + Click -->
20.Vue 組件中 data 為什麼必須是函數
vue組件中data值不能為對象，因為對象是引用類型，組件可能會被多個實例同時引用。
如果data值為對象，將導致多個實例共享一個對象，其中一個組件改變data屬性值，其它實例也會受到影響。
Ⅲ vue面試題大全
1. vue生命周期都有哪些？
2. 進入頁面會執行哪些生命周期函數
beforeCreate、created、beforeMounted、mounted
3. 在哪裡可以訪問 data
beforeCreate中不可以訪問
created中有 el
beforeMounte中有 el
mouted中都有，包括之後的生命周期鉤子函數都有
4、 如果加入了keep-alive會增加兩個生命周期函數
activated和deactivated
進入頁面的時候觸發activated，離開頁面觸發 deactivated
5. 如果加入keep-alive組件，第一次進入頁面會觸發哪些生命周期
beforeCreate、created、beforeMounted、mounted、activated
6、 如果加入了keep-alive組件後，第二次或第n次進入頁面會觸發哪些生命周期？
只觸發一個生命周期：activated(因為該頁面已經被緩存起來了)
1.是什麼
vue自帶的一個組件，用來緩存組件，提升性能，keep-alive可以在組件切換時，保存其包裹組件的狀態，使其不被銷毀。
2、參數
include：表示只有匹配的組件才會被緩存；
exclude：表示匹配到的組件不會被緩存；
3、生命周期
有兩個生命周期函數，同上
4.使用場景
-列表頁面跳轉詳情頁的時候，用戶通過點擊跳轉，那麼詳情頁每次都要去請求數據，如果用戶每次點擊的都是同一個，那麼詳情頁就沒必要去重新請求，直接緩存起來就行了，如果點擊的不是同一個再重新發起請求；
-在router-view上使用可以緩存路由組件；
1.相同點
都可以控制元素的顯示隱藏
2.區別
v-if通過創建/銷毀dom元素來控制元素的顯示隱藏，v-show通過css屬性的display:none來控制元素的顯示隱藏
3.場景
頻繁切換使用v-show，會節省性能，反之使用v-if
1、當項目使用keep-alive時，可搭配組件name進行緩存過濾
當我們使用keep-alive緩存組件時，被緩存組件中的mounted函數只會執行一次，第二次進入頁面不會重新觸發，有兩種解決方法，一種是使用activated()，在裡面進行mounted中的操作；另一種就是在keep-alive中增加一個過濾，如下所示：
exclude屬性就是要忽略匹配到的組件。
2、DOM做遞歸組件時；
當組件需要自己調用自己的時候
3、使用vue-tools時；
vue-devtools調試工具里顯示的組件名稱是由vue中組件name決定的
v-for的優先順序比v-if的優先順序高，這是在源碼中規定好的，並且v-for和v-if不可以同時使用，同時使用會很浪費性能，比如明知判斷條件是false的情況下，還需要去遍歷一下數據，所以通常我們會把v-if放在v-for的外面。
是用來獲取更新後的dom內容，並且該方法是非同步的
作用是將回調函數延遲到下次dom更新循環之後執行因為vue更新數據是非同步的，修改data中的數據，視圖不會立刻更新，vue會將你對data的修改放到一個watch隊列中，當同一事件循環中的所有數據更新完以後，再進行試圖更新，所以會產生延遲。
最常見的使用場景就是，在created中獲取dom元素的時候需要使用$nextTick獲取
組件中的 data 寫成一個函數，數據以函數返回值形式定義，這樣每復用一次組件，就會返回一份新的 data ，相當於給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份 data ，就會造成一個變了全都會變的結果。
當父組件給子組件傳遞數據的時候，子組件只允許對數據進行讀取，不允許修改數據，因為當子組件修改了父組件傳過來的數據時，其他引用父組件數據的組件也會被修改，從而導致報錯，然而也不知道是當前組件報錯還是父組件報錯還是修改父組件信息的子組件的錯誤；
如果要修改可以通過this.$emit方法派發自定義事件，在父組件中修改；
hash模式和history模式，默認是hash模式
區別如下：
1、表現形式不同，hash使用#表示，history用/表示；
2、hash值不會發送到服務端，history會發送到服務端 ，如果沒有匹配到對應的路由，需要配置對應的頁面；
3、獲取方式不同，hash值可以通過location.path獲取，history通過location.pathname獲取；
4、hash可以通過window.onhashchange監聽hash值的改變 ，history
可以通過onpopstate監聽變化；
組建中的template標簽會編譯為render函數，通過render函數創建出dom元素，然後轉化為虛擬dom最終轉化為真實dom
1、虛擬dom是一個js對象，用對象屬性來描述節點，是一層對真實dom的抽象
2、因為dom的執行速度遠不如js執行速度快，因此將真實的dom抽象成js對象，然後通過演算法計算出真正需要更新的節點，從而減少了大量的dom操作。
3、將直接操作dom轉換成了兩個js對象中去比較，找出差異項，做局部更新，提高了執行效率。
未完待續...
Ⅳ vue面試題（1）
1.css只在當前組件起作用
答：在style標簽中寫入 scoped 即可 例如：<style scoped></style>
2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；
3.$route和$router的區別
答：$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。
4.vue.js的兩個核心是什麼？
答：數據驅動、組件系統
5.vue幾種常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
6.vue常用的修飾符？
答：.prevent: 提交事件不再重載頁面；
.stop: 阻止單擊事件冒泡；
.self: 當事件發生在該元素本身而不是子元素的時候會觸發；
.capture: 事件偵聽，事件發生的時候會調用
7.v-on 可以綁定多個方法嗎？
答：可以
8.vue中 key 值的作用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地復用」策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高塵梁效的更新虛擬DOM。
9.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，盡量採取計算屬性的方式。好處：
①使得數據處理結構清晰；
②依賴於數據，數據更新，處理結果自動更新；
③計算屬性內部this指向vm實例；
④在template調用時，直接寫計算屬性名即可；
⑤常用的是getter方法，獲取數據，也可以使用set方法改變數據；
⑥相較於methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算。
10.vue等單頁面應用及其優缺點
答：優點：Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅森和動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次載入首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需此兄盯要自行實現前進、後退。
註：本文章為網路收集整理
Ⅳ Vue面試題集錦
原理：在創建Vue實例時，Vue會遍歷data選項的屬性，利用Object.defineProperty()為屬性添加getter和setter對數據的讀取進行劫持（getter用來依賴手機，setter用來派發更新），並且在內部追蹤依賴，在屬性被訪問和修改時通知變化。每個組件實例會有相應的watcher實例，會在組件渲染過程中記錄依賴的所有數據屬性，之後依賴項被改動時，setter方法笑羨會通知依賴與此data的watcher實例重新計算（派發更新），從而使它關聯的組件重新渲染。
一句話總結：vue.js採用數據劫持結合發布-訂閱模式，通過Object.defineProperty()來劫持各個屬性的setter、getter，在數據變動時發布消息給訂閱者，羨升祥觸發響應的監聽回調。
我的理解：在new Vue的時候，在Observer中通過Object.defineProperty()達到數據劫持，代理所有數據的getter和setter屬性，在每次觸發setter的時候，都會通過Dep來通知Watcher，Watcher作為Observer數據監聽器與Compile模板解析器之間的橋梁，當Observer監聽到數據發生改變的時候，通過Updater來通知Compile更新視圖。而Compile通過Watcher訂閱對應數據，綁定更新函數，通過Dep來添加訂閱者，達到雙向綁定。
Vue實例從創建到銷毀的全過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載DOM->渲染、更新->渲染、卸載等一系列過程。
它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
它可以分為8個階段：創建前/後、載入前/後、更新前/後、銷毀前/後。
第一次頁面載入時會觸發beforeCreate、created、beforeMounted、mounted
DOM渲染在mounted中就已經完成。
1、beforeCreate：可以在這加個loading事件，在載入實例時觸發；
2、created：初始化完成時的事件寫在這里，如在這結束loading事件，非同步請求也適宜在這里調用；
3、mounted：掛載元素，獲取DOM節點；
4、updated：如果對數據統一處理，在這里寫上相應函數；
5、beforeDestroy：可以放一個確認停止事件的確認框；
6、nextTick：更新數據後立即操作DOM。
1、對象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
2、數組方法v-bind:class="[class1, class2]"
3、行內v-bind:style="{color: color, fontSize: fontSize+'px'}"
1、router-link標簽會渲染為標簽，咋填template中的跳轉都是這種；
2、另一種是編輯式導航，也就是通過js跳轉比如router.push('/home')
M- model ，model 表示數據模型，也可以在model中定義數據修改和操作的業務邏輯
V- view，view表示視圖，它負責將數據模型轉換為視圖展示出來
VM- viewmodel，viewmodel是一個同步view和model的對象，連接view和model，用於監聽數據模型的改變和控制視圖行為
computed：computed是計算屬性，也就是計算值，更多用於計算值的場景。它具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時重新調用對應的getter來計算。
watch：watch更多的是觀察作用，類似於某些數據的監聽回調，用於觀察props、$emit或者本組件的值，當數據變化時用來執行回調進行後續操作。它不兄搏具有緩存性，頁面重新渲染時值不會變化也不會執行。
在style標簽上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有化的目的，但是也得慎用，樣式不易改變。
解決方法：
① 使用混合型的css樣式，混合使用全局樣式和私有樣式。
② 深度作用選擇器：如果你希望scoped樣式中的一個選擇器能夠作用的更深，可以使用>>>操作符。如：<style scoped>.a>>>.b{/ ... /}</style>
一個元素綁定多個事件的寫法有兩種：
1、修飾符的使用
2、在method方法里分別寫兩個事件
Vue組件中的data值不能為對象，因為對象是引用類型，組件可能會被多個實例同時引用，如果data值為對象，將導致多個實例共享一個對象，其中一個組件改變data屬性值，其它實例也會受到影響。
原理：JS執行是單線程的，它是基於事件循環的。所有同步任務都在主線程上執行，形成一個執行棧。主線程之外，還存在一個任務隊列，只要非同步任務有了運行結果，就在任務隊列中放置一個事件。一旦執行棧中的所有同步任務執行完畢，系統就會讀取任務隊列，看看那些對應的非同步任務，等結束等待狀態，進入執行棧，開始執行。主線程不斷重復上面的步驟。主執行的執行過程就是tick，所有的非同步結果都是通過任務隊列來調度的。任務分為兩大類：宏任務和微任務，宏任務包括：setTimeOut等，微任務包括promise.then。
Vue用非同步隊列的方式來控制DOM更新和nextTick回調先後執行。在下次DOM更新循環結束之後執行延遲回調，nextTick主要使用了宏任務和微任務，nextTick把要執行的任務推入一個隊列中，在下一個tick同步執行隊列的所有任務，它是非同步任務中的微任務。如果我們在更新了一個響應式數據後，需要同步拿到這個渲染後的DOM結果，就使用nextTick方法，非同步拿這個結果。
使用方式：
① this. nextTick.then(cb); 非同步
父組件調用子組件的方法
父組件： this.$refs.yeluosen.childMethod()
子組件向父組件傳值並調用方法： $emit
組件之間： bus==$emit+$on
1、第一種方法是直接在子組件中通過this. emit向父組件觸發一個事件，父組件監聽這個事件就行了。
3、第三種都可以實現子組件調用父組件的方法。
keep-alive是Vue內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
原來的組件實例會被復用。這也意味著組件的生命周期鉤子不會再被調用，你可以簡單的監控watch $route對象：
is用來動態切換組件，DOM模板解析
全局的：前置守衛、後置鉤子（beforeEach、afterEach）beforeResolve
單個路由獨享的：beforeEnter
組件級的：beforeRouteEnter（不能獲取組件實例this）、beforeRouteUpdate、beforeRouteLeave
這是因為在執行路有鉤子函數beforeRouteEnter的時候，組件還沒有被創建出來，先執行beforeRouteEnter，再執行周期鉤子函數beforeCreate，可以通過next獲取組件的實例對象，如：next((vm) => {})，參數vm就是組件的實例化對象。
缺點：
優點：
計算屬性是需要復雜的邏輯，可以用方法method代替。
vue-cli提供的腳手架模板有browserify和webpack。
① 是什麼？
Vue框架中的狀態管理，分別是State、Getter、Mutation、Action、Mole。
② 怎麼使用？
新建一個目錄store。
③ 功能場景？
單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車等。
④ vuex的狀態：
a. State特性：vuex就是一個倉庫，倉庫裡面放了很多對象，其中state就是數據源存放地，對應於一般Vue對象裡面的data。state裡面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新。它通過mapState把全局的state和getters映射到當前組件的computed計算屬性中。
b. Getter特性：getters可以對State進行計算操作，它就是store的計算屬性。雖然在組件內可以做計算屬性，但是getters可以在多組件之間復用。如果一個狀態只在一個組件內使用，可以不用getters。
c. Mutation特性：改變store中state狀態的唯一方法就是提交mutation，每個mutation都有一個字元串類型的事件類型和一個回調函數，我們需要改變state的值就要在回調函數中改變。我們要執行這個回調函數，那我們需要執行一個相應的調用方法：store.commit。
d. Action特性：類似於mutation，不同點在於：Action提交的是mutation，而不是直接變更狀態。Action可以包含任意非同步操作，Action函數接受一個與store實例具有相同方法和屬性的context對象，因此你可以調用context.commit提交一個mutation。或者通過context.state和context.getters來獲取state和getters。Action通過store.dispatch方法觸發：store.dispatch('increment')。
e. Mole特性：Mole其實只是解決了當state中很復雜臃腫的時候，mole可以將store分解為模塊，每個模塊中擁有自己的state、mutation、action和getter。
① 創建組件頁面eg Toast.vue
② 用Vue.extend() 擴展一個組件構造器，再通過實例化組件構造器，就可以創造出可復用的組件。
③ 將toast組件掛載到新創建的div上；
④ 將toast組件的dom添加到body里；
⑤ 修改優化達到動態控制頁面顯示文字跟顯示時間；
修飾符分為：一般修飾符、事件修飾符、按鍵、系統
① 一般修飾符：
② 事件修飾符
③ 按鍵修飾符
④ 系統修飾符（可以用如下修飾符來實現僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的監聽器。）
Vue的核心的功能，是一個視圖模板引擎，但這不是說Vue就不能成為一個框架。在聲明式渲染（視圖模板引擎）的基礎上，我們可以通過添加組件系統、客戶端路由、大規模狀態管理來構建一個完整的框架。更重要的是，這些功能相互獨立，你可以在核心功能的基礎上任意選用其他的部件，不一定要全部整合在一起。可以看到，所說的「漸進式」，其實就是Vue的使用方式，同時也體現了Vue的設計的理念
在我看來，漸進式代表的含義是：主張最少。視圖模板引擎每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：
必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。
Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。
漸進式的含義，我的理解是：主張最少，沒有多做職責之外的事。
Ⅵ 47道基礎的VueJS面試題(附答案)
1、什麼是MVVM框架？它適用於哪些場景？
MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。
在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。
2、active- class是哪個組件的屬性？
它是 vue-router模塊的 router-link組件的屬性。
3、如何定義Vue- router的動態路由？
在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。
4、如何獲取傳過來的動態參數？
在組件中，使用$router對象的 params.id，即 $route.params.id 。
5、vue- router有哪幾種導航鉤子？
有3種。
第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。
第二種是組件內的鉤子。
第三種是單獨路由獨享組件。
6、mint-ui是什麼？如何使用？
它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和JavaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。
7、V-model是什麼？有什麼作用？
v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。
8、Vue.js中標簽如何綁定事件？
綁定事件有兩種方式。
第一種，通過v-on指令， 。
第二種，通過@語法糖， input@ click= doLog()/>。
9、vuex是什麼？如何使用？在哪種功能場景中使用它？
vuex是針對 Vue. js框架實現的狀態管理系統。
為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。
使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。
10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？
自定義指令包括以下兩種。
它有如下鉤子函數。
鉤子函數的參數如下。
11、至少說出vue.js中的4種指令和它們的用法。
相關指令及其用法如下。
12、Vue-router是什麼？它有哪些組件？
它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。
13、導航鉤子有哪些？它們有哪些參數？
導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。
全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
單個路由獨享鉤子有 beforeEnter。
組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它們有以下參數。
14、Vue.js的雙向數據綁定原理是什麼？
具體步驟如下。
（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。
（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。
15、請詳細說明你對Vue.js生命周期的理解。
總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
當使用組件的kep- alive功能時，增加以下兩個周期。
Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。
16、請描述封裝Vue組件的作用過程。
組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。
使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。
17、你是怎樣認識vuex的？
vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。
18、Vue- loader是什麼？它的用途有哪些？
它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。
用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。
19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。
assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。
20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
具體步驟如下。
（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。
（2）導入需要用到的頁面（組件）。
（3）將導入的組件注入uejs的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。
21、談談你對vue.js的 template編譯的理解。
簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。
詳細步驟如下。
（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。
（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。
22、說一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。
ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。
DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。
23、v-show指令和v-if指令的區別是什麼？
v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。
24、如何讓CSS只在當前組件中起作用？
在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。
25、如何創建vue.js組件？
在vue.js中，組件要先注冊，然後才能使用。具體代碼如下
26、如何實現路由嵌套？如何進行頁面跳轉？
路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。
首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。
27、ref屬性有什麼作用？
有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。
注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。
28、Vue. js是什麼？
Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。
29、描述vue.js的一些特性。
Vue.js有以下持性。
（1）MVVM模式。
數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。
使用MVVM模式有幾大好處。
（2）組件化開發
（3）指令系統
（4）Vue2.0開始支持虛擬DOM。
但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。
30、描述vue.js的特點。
Vue. js有以下特點。
31、在vue.js中如何綁定事件？
通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。
32、請說明 組件的作用。
當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。
當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。
33、axios是什麼？如何使用它？
axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。
用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。
34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？
當調用post方法表示在發送post非同步請求。
35、sass是什麼？如何在ue中安裝和使用？
sass是一種CSS預編譯語言安裝和使用步驟如下。
（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。
（2）在 webpack. config. js中配置sass載入程序。
（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。
36、如何在 Vue. js中循環插入圖片？
對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。
代碼如下：
Ⅶ 史上最全前端vue面試題！推薦收藏
1.為什麼會形成跨域？
不是一個源的文件操作另一個源的文件就會形成跨域。當請求端的協議、域名、埠號和伺服器的協議、域名、埠號有一個不一致就會發生跨域。
解決方法：安裝插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue組件裡面，通過dispatch來出發actions提交修改數據的操作。
② 然後再通過actions的commit來出發mutations來修改數據。
③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心裏面的數據狀態）裡面的數據。
④ 最後由store觸發每一個調用它的組件更新。
3.vuex是什麼？怎麼使用？
vuex是一個專為vue.js應用程序開發的狀態管理模式。使用:store,getters,mutations,actions,moles詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的數據在頁面刷新後數據消失怎麼解決？
使用sessionStorage或localStorage存儲數據;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默認行為？
在綁定事件時，在指令後邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為
6.深拷貝與淺拷貝？
假設B復制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內存中的同一個值），沒變是深拷貝（修改堆內存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內存地址，深拷貝是增加了一個指針並申請了一個新的內存，使這個增加的指針指向這個新的內存。深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調用
8. keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設置，exclude優先順序更 改，則組件不會被緩存。
應用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態。
9.vue傳值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟組件傳值
$emit 分發
$on 監聽
$off 取消監聽
$once 一次性監聽一個事件
在js文件中定義一個中央事件匯流排Bus，並暴露出來
具體的實現方式：
使用Bus的時候在接收Bus的組件的beforeDestroy函數中銷毀Bus，否則會一直疊加調用這個方法。
應用場景：「退出登錄」 -> ①點擊退出登錄；②修改密碼後自動退出登錄
11.組件跨級傳值
$attrs a->b->c
$listeners 監聽
12.vue事件修飾符有哪些？
.stop .prevent .self .once .passive .sync
13.箭頭函數中的this？
不具有this綁定，但函數體可以使用this，這個this指向的是箭頭函數當前所處的詞法環境中的this對象。
15.為什麼vue組件中data必須是一個函數？
如果不是函數的話，每個組件的data都是內存的同一個地址，一個數據改變了其他也改變了，當他是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。
16.v-if 和 v-show區別？
v-if 是對標簽的創建與銷毀， v-show 則僅在初始化時載入一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。
17.v-text 與 v-html區別？
v-text 用於普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染過的數據，它默認用「就地復用」策略。如果數據項的順序改變，vue將不是移動DOM元素來匹配數據項的改變，而是簡單地復用此處每個元素，並確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM演算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法，它會基於key的變化重新排列元素順序。
19.Scss是什麼？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變數，可以用混合器，可以嵌套等。
20.vue獲取dom？
ref
21.vue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什麼是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基於組件路由配置，路由參數、查詢、通配符，細粒度導航控制，自定義的滾動條行為等。
23.vue路由傳參，接收？
傳： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和節流？
節流是一定時間內執行一次函數，多用在scroll事件上；
防抖是在一定時間內執行最後一次的函數，多用在input輸入操作，表單提交等。
25.如何讓scss只在當前組件中起作用？
Ⅷ vue常見面試題（3）
1. 什麼是vue的計算屬性computed
計算屬性升頌是需要復雜的邏輯，可以用方法method代替
2.vue-cli提供的幾種腳手架模板
vue-cli 的腳手架項目模板有browserify 和 webpack；
3.組件中傳遞數據？
4. vue-router實現路由懶載入（ 動態載入路由 ）
5. vue-router 的導航鉤子,主要用來作用是攔截導航,讓他完成跳轉或取消
6. 完整的 vue-router 導航解析流程
7. vue-router如何響應 路由參數 的變化？
原吵隱鄭來的組件實例會被復用。這也意味著組件的生命周期鉤子不會再被調用。你可以簡單地 watch (監測變化) $route 對象：
8.vue-router的幾種實例方法以及參數傳遞
name傳遞
to來傳遞
採用url傳參
9. is的用法（用於動態組件且基於 DOM 內模板的限制來工作。）
is用來動態切換組件，DOM模板解析
<table><tris="my-row"></tr> </table>
10.vuex是什麼？怎麼使用？哪種功能場景使用它？
是什麼：vue框架中狀態管理:有五種，分別是 State、 Getter、Mutation 、Action、 Mole
使用：新建一個目錄store，
場景：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
vuex的State特性
A、Vuex就是一個倉庫，倉庫裡面放了很多對象。其中state就是數據源存放地，對應於一般Vue對象裡面的data
B、state裡面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
C、它通過mapState把全局的state和getters映射到當前組件的computed計算屬性中
vuex的Getter特性
A、getters可以對State進行計算操作，它就是Store的計算屬性
B、雖然在組件內也可以做計算屬性，但是getters可以在多組件之間復用
C、如果一個狀態只在一個組件內使用，是可以不用getters
vuex的Mutation特性
改變store中state狀態的唯一方法就是提交mutation，就很類似事件。每個mutation都有一個字元串類型的事件類型和一個回調函數，我們需要改變state的值就要在回調函數中改變。我們要執行這個回調函數，那麼我們需要執行一個相應的調用方法：store.commit。
Action類似於mutation，不同在於：Action提交的是mutation，而不是直接變更狀態；Action可以包含任意非同步操作，Action函數接受一個與store實例具有相同方法和屬性的context對象，因此你可以調用context.commit提交一個mutation，或者通過context.state和context.getters來獲取state和getters。Action通過store.dispatch方法觸發：eg。store.dispatch('increment')
vuex的mole特性Mole其實只是解決了攜岩當state中很復雜臃腫的時候，mole可以將store分割成模塊，每個模塊中擁有自己的state、mutation、action和getter
Ⅸ 2021 web面試題常見之一vue computed和watch 03
vue中必問，回答不清楚說明不了解，也會在日常中寫錯。
監聽除去new關鍵詞寫時換成newVal外，監聽值變化，做業務操作。
computed可以緩存結果，依賴a和b返回新c，具有返回數值。當需要新值c，並且依賴其餘時要第一個想到。
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>法外狂徒張三</h3>
姓名：<input type="text" v-model="name">
諢號：<input type="text" v-model="txt">
<p>
顯示： {{tip}}
</p>
ps：面試官問：watch不能實現computed的功能?
<p>
<input type="radio" name="a" value="不能" v-model="res">不能
<input type="radio" name="a" value="能" v-model="res">能
</p>
<p style="color:red" v-show="res==='不能'">沒理解！！</p>
<p style="color:green" v-show="res==='能'">理解！！</p>
</div>
<script>
// 初始化vue
var app=new Vue({
el:'#app',
data() {
return {
res:'',//結果
name:'',
txt:'',
tip:''
}
},
computed: {
// 函數才有return
// 思考能不能直接tip() ? 而且不刪除return中tip為什麼會報錯
},
watch:{
name:function(newVal,oldVal) {
console.log(1);
this.tip=this.txt+newVal
},
txt:function(newVal,odlVal) {
this.tip=newVal+this.name
}
}
})
</script>
</body>
</html>
···