㈠ 2021-11-10.Vue前端面試題及答案
const vm = new Vue({
...
methods: {
handlerEvent(event) {
console.log(event) // 滑鼠點擊時，獲取到事件對象
}
}
})
1、如果只是事件函數的調用，函數名稱後面不要添加括弧
好處：函數執行時，第一個形式參數會被系統自動注入
一個事件對象，提供給函數使用
@click="handlerEvent"
2、如果事件函數調用執行時，需要傳遞參數，函數名稱後面
必須添加括弧，如果要使用事件對象，就必須手工注入(固定語法)
@click="handlerEvent($event)"
事件冒泡是JS語法中的一種事件觸發機制，描述的是目標元素上的事件一旦發生，就會根據DOM節點結構，將事件逐步依次觸發到父節點上的一種事件機制
原生JS中通過兼容性語法阻止事件冒泡
event.stopPropagation?event.stopPropagation():event.cancelBubble=true
Vue中對於事件冒泡的處理進行了封裝，提供了事件修飾符完成阻止冒泡行為
固定語法：標簽對象的事件屬性上，添加 @事件對象.stop="處理函數"
.self事件修飾符的作用，就是讓事件的觸發方式只能由當前標簽上發生的事件觸發！
.lazy作為表單修飾符，經常用在表單元素上，用於將表單數據的同步機制延遲到表單元素失去焦點時再進行同步，節省資源、提高整體效率！
Vue數據雙向綁定的特性，指代的是Vue實例中的數據和網頁視圖中的數據綁定，實例中數據的更新會直接影響視圖的渲染展示，視圖中的數據更新會自動同步到實例中的數據，這樣的操作機制就是數據雙向綁定機制；Vue底層主要是通過Object.defineProperty()數據劫持的操作方式完成的！
數據劫持本質上就是一種變數的高級聲明方式，通過數據劫持的語法聲明的變數，我們可以針對變數數據的查詢、編輯進行監聽，隨時根據變數的使用情況進行功能的添加，如數據的雙向綁定，完成數據的自動同步和自動渲染！
㈡ 2021上海中級前端面試常問問題整理
金九銀十的時間到了，又是適合跳槽的時間，我之前是在鄭州工作，然後九月來上海這邊，面了一周左右，找到了還算滿意的工作，現在整理一下面試中遇到的問題，給要在上海找工作的小夥伴一個參考，也給自己下次換工作做一個參考，哈哈
我是主要做vue的還沒有學vue3所以面試中大多是vue2的問題，但是上海挺多公司開始轉vue3了，這個還是要抓緊學習
先把問題記錄下來，有時間會更新答案
在mvvm架構下，View和Model之間並沒有直接的聯系，而是通過ViewModel進行交互，Model 和 View 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel通過雙向數據綁定把View層和Model層連接起來，而View和Model之間的同步工作完全是自動的，無需人為干涉，因此開發者只需要關注業務邏輯，不需要手動操作DOM，不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由MVVM來統一管理
computed是vue的計算屬性，可以用於一些復雜的運算，有緩存性，依賴的值不變的情況下不會重新計算
1.是計算值，
2.應用：就是簡化tempalte裡面{{}}計算和處理props或$emit的傳值
3.具有緩存性，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結果，而不必再次執行函數
watch是監聽屬性，沒有緩存，deep(深度監聽，用於數組，對象)，handler，immediate（立即執行）
1.是觀察的動作，
2.應用：監聽props，$emit或本組件的值執行非同步操作
3.無緩存性，頁面重新渲染時值不變化也會執行
組件實例對象data必須為函數，目的為了防止多個組件實例直接共用一個data，產生數據污染
在組件復用時，data作為函數，有自己的存儲空間，每次都能返回一個新的data，其中一個組件中data的值變化，不會影響其他組件中的data
pc：elementui，avue，Ant Design of Vue
移動：vantui，mint ui
不能，v-for優先順序比v-if高，放在一起使用的時候，v-if要在每個循環中創建銷毀dom，浪費資源
onLoad(option)
上傳--->提審--->發布
wx.navigateToMiniProgram
可配置跳轉版本（開發版，體驗版，正式版)
配置合法域名，新建web-view頁面
wx-open-launch-weapp 小程序原始id
可參考 https://www.jianshu.com/p/7fbca9f7df2b
計算寬度不一致
ie：content+padding+border
標准：content
box-sizing：content-box ( 標准 )
box-sizing：border-box ( ie )
flex布局可以更好的適配移動端
1.flex布局
2.不知道子元素寬高：position:absolute;top:50%;left50%; transform:translate(-50%,-50%)
3.已知子元素的寬高：position:absolute;top:50%;left50%;margin-left:寬的一半,margin-top:高的一半
1.flex布局，左側固定寬，右側flex:1
2.左側浮動，右側margin-left:左側的寬
3.左側定寬，右側絕對定位，left:左側的寬
4.左側絕對定位，右側margin-left:左側的寬
上下寬高固定，下用絕對定位定在底部，中間絕對定位，top：上高，bottom：下高；height：auto
相當於一個完全封閉的盒子，元素布局不受外界影響
生成BFC的條件：float(除none)、overflow、
可以解決浮動布局造成的父元素塌陷
解決外邊距重合的問題
可以計算浮動的高，
㈢ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
㈣ 前端面試 問什麼問題
web前端面試會問人事方面的內容和web前端技術的內容；
人事的面試
web前端人事面試方面，需要注意如何自我介紹、性格有哪些優劣勢、職業規劃方向是什麼、你的特長是什麼、對於加班之類你是怎麼看待等人事面試內容；
web前端技術的面試
技術面試，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相關技術，比如tcp握手協議、網路安全、後端技術等；
對於web前端面試准備，建議你去看「決勝前端」（min app），它裡麵包含了很多web前端技術面試、人事面試等面試真題，而且針對面試題做了詳細的分析與解答。
我給你截圖看一下例子吧
㈤ 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 面試中常問知識點整理
生命周期：Vue實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期，各個階段有相對應的事件鉤子。
beforeCreate（創建前），在數據觀測和初始化事件還未開始
created（創建後），完成數據觀測，屬性和方法的運算，初始化事件， $el 屬性還沒有顯示出來
beforeMount（載入前），在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裡面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後），在 el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換 el 屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前），在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後），在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在伺服器端渲染期間不被調用。
beforeDestroy（銷毀前），在實例銷毀之前調用。實例仍然完全可用。
destroyed（銷毀後），在實例銷毀之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。
注意：
created 階段的ajax請求與 mounted 請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處於白屏狀態。
mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 。
初始化組件時，僅執行了 beforeCreate/Created/beforeMount/mounted 四個鉤子函數
當改變 data 中定義的變數（響應式變數）時，會執行 beforeUpdate/updated 鉤子函數
當切換組件（當前組件未緩存）時，會執行 beforeDestory/destroyed 鉤子函數
初始化和銷毀時的生命鉤子函數均只會執行一次， beforeUpdate/updated 可多次執行
僅當子組件完成掛載後，父組件才會掛載
當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）
父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的
銷毀父組件時，先將子組件銷毀後才會銷毀父組件
組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行
當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的
mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行
1、什麼是vue生命周期？
答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
2、vue生命周期的作用是什麼？
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
3、vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創建前/後、載入前/後、更新前/後、銷毀前/銷毀後。
5、DOM 渲染在哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
vue實現數據雙向綁定主要是：採用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter，getter ，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉為 getter/setter 。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合 Observer ，Compile和 Watcher 三者，通過 Observer 來監聽自己的 model 的數據變化，通過 Compile 來解析編譯模板指令（vue中是用來解析 {{}}），最終利用 watcher 搭起observer和 Compile 之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（ input ）—>數據 model 變更雙向綁定效果。
js實現簡單的雙向綁定：
1、父組件與子組件傳值
父組件傳給子組件：子組件通過 props 方法接受數據；
子組件傳給父組件： $emit 方法傳遞參數
2、非父子組件間的數據傳遞，兄弟組件傳值 eventBus ，就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。
hash模式：在瀏覽器中符號「#」，#以及#後面的字元稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。
history模式：history採用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
需求一：
在一個列表頁中，第一次進入的時候，請求獲取數據。
點擊某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不刷新。
也就是說從其他頁面進到列表頁，需要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。
解決方案
在 App.vue設置：
假設列表頁為 list.vue ，詳情頁為 detail.vue ，這兩個都是子組件。
我們在 keep-alive 添加列表頁的名字，緩存列表頁。
然後在列表頁的 created 函數里添加ajax請求，這樣只有第一次進入到列表頁的時候才會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就可以解決問題了。
需求二：
在需求一的基礎上，再加一個要求：可以在詳情頁中刪除對應的列表項，這時返回到列表頁時需要刷新重新獲取數據。
我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。
這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設置。
設置完這個屬性，還要在 App.vue 文件里設置 watch 一下 $route 屬性。
這樣就不需要在列表頁的 created 函數里用 ajax 來請求數據了，統一放在 App.vue 里來處理。
觸發請求數據有兩個條件：
從其他頁面（除了詳情頁）進來列表時，需要請求數據。
從詳情頁返回到列表頁時，如果詳情頁 meta 屬性中的 isRefresh 為 true ，也需求重新請求數據。
當我們在詳情頁中刪除了對應的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設為 true 。這時再返回到列表頁，頁面會重新刷新。
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 是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。
㈦ 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、active-class是哪個組件的屬性？嵌套路由怎麼定義？
答：vue-router模塊的router-link組件。
2、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
3、vue-router有哪幾種導航鉤子？
答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
4、scss是什麼？安裝使用的步驟是？有哪幾大特性？
答：預處理css，把css當前函數編寫，定義變數,嵌套。 先裝css-loader、node-loader、sass-loader等載入器模塊，在webpack-base.config.js配置文件中加多一個拓展:extenstion，再加多一個模塊：mole裡面test、loader
4.1、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：還是在同一個文件，配置一個mole屬性
第四步：然後在組件的style標簽加上lang屬性 ，例如：lang=」scss」
有哪幾大特性:
1、可以用變數，例如（$變數名稱=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？
答：基於vue的前端組件庫。npm安裝，然後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from 『mint-ui』。組件一：Toast(『登錄成功』)；組件二：mint-header；組件三：mint-swiper
6、v-model是什麼？怎麼使用？ vue中標簽怎麼綁定事件？
答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />
7、axios是什麼？怎麼使用？描述使用它實現登錄功能的流程？
答：請求後台資源的模塊。npm install axios -S裝好，然後發送的是跨域，需在配置文件中config/index.js進行設置。後台如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中
8、axios+tp5進階中，調用axios.post(『api/user』)是進行的什麼操作？axios.put(『api/user/8′)呢？
答：跨域，添加用戶操作，更新操作。
9、什麼是RESTful API？怎麼使用?
答：是一個api的標准，無狀態請求。請求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標准有：.post .put .delete
10、vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
11、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？
答：一個model+view+viewModel框架，數據模型model，viewModel連接兩個
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
答：全局定義指令：在vue對象的directive方法裡面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding
13、說出至少4種vue當中的指令和它的用法？
答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
14、vue-router是什麼？它有哪些組件？
答：vue用來寫路由一個插件。router-link、router-view
15、導航鉤子有哪些？它們有哪些參數？
答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
參數：有to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種
16、Vue的雙向數據綁定原理是什麼？
答：vue.js 是採用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變數替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)裡面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。
ps：16題答案同樣適合」vue data是怎麼實現的？」此面試題。
17、請詳細說下你對vue生命周期的理解？
答：總共分為8個階段創建前/後，載入前/後，更新前/後，銷毀前/後。
創建前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
18、請說下封裝 vue 組件的過程？
答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。
然後，使用Vue.extend方法創建一個組件，然後使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用emit方法。
19、你是怎麼認識vuex的？
答：vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（數據源）集中管理驅動組件的變化（好比spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 非同步邏輯應該封裝在action中。
20、vue-loader是什麼？使用它的用途有哪些？
答：解析.vue文件的一個載入器，跟template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
21、請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件
22、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
答：第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {
第二步：在需要用的頁面（組件）中導入：import smithButton from 『../components/smithButton.vue』
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用，<smith-button> </smith-button>
問題有：smithButton命名，使用的時候則smith-button。
23、聊聊你對Vue.js的template編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合並option。
然後，AST會經過generate（將AST語法樹轉化成render funtion字元串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裡面有（標簽名、子節點、文本等等）
㈨ 史上最全前端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面試必過題 優選(鉤子函數)
①自定義指令是什麼？以及自定義指令的使用場景
在Vue中，有很多內置指令，但是這些指令只能滿足我們最基礎的使用，當我們在實際項目中遇到了必須要對DOM進行操作的邏輯時，我們就用到了自定義指令
②自定義指令的鉤子函數
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。
unbind：只調用一次，指令與元素解綁時調用。
在父組件給子組件傳值的時候，給子組件加一個判斷，如果數據沒有請求到就不渲染當前組件
vue-router傳參兩種方式：params和query
方法一：
query 方式傳參和接收參數
傳參：
接收參數：
this.$route.query.id
傳參是this.$router,接收參數是this.$route
兩者區別：
$router為VueRouter實例，想要導航到不同URL，則使用$router.push方法
$route為當前router跳轉對象，裡面可以獲取name、path、query、params等
方法二：
params方式傳參和接收參數
傳參：
接收參數: this.$route.params.id
query和oarams的區別：
query相當於get請求，頁面跳轉的時候，可以在地址欄看到請求參數，而params相當於post請求，參數不會再地址欄中顯示
全局導航鉤子：beforeEach、afterEach
組件內導航：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
獨享導航守衛：beforeEnter