1.css只在當前組件起作用
答：在style標簽中寫入scoped即可 例如：<style scoped></style>
2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；
3.router的區別
$route:路由信息對象
包括fullPath，hash，matched，meta，name，params， path， query，等路由信息參數。
例如，對于路徑 /foo?user=1，則有 this.$route.user = 1
$router:路由實例
對象包括了路由的跳轉方法，鉤子函數等。
例如，跳轉頁面：this.$router.push({ path: 'home' })
this.$router.push({ path: 'detail', query: { id: '123' }})
push方法其實和<router-link :to="...">是等同的。
路由傳參的方式
1.可以手寫完整的path：
this.$router.push({path:`/user/${userId}`})
這樣傳遞參數的話，配置路由的時候需要在path上加參數path：user/：userId。
這種接收參數的方式是this.$route.params.userId。
2.也可以用params傳遞：
this.$router.push({name:'user',params:{userId:123}}) //localhost:8080/#/user
3.也可以用query傳遞：
this.$router.push({path:'user',query:{plan:'plan'}}) //localhost:8080/#/user?plan=plan
query傳參是針對path的，params傳參是針對name的。。接收參數的方式都差不多。。this.route.params.
注意這只是跳轉url，跳轉到這個url顯示什么組件，得配置路由。router跳轉和<router-link>標簽跳轉，規則差不多。
4.vue.js的兩個核心是什么？
答：數據驅動、組件系統
5.vue幾種常用的指令
答：
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，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退。
11.怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值
答：在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id，使用 router 對象的 params.id 獲取。
12.測試題目
console.log(a) // fn
var a = 123;
function a() {
}
console.log(a) //123
預編譯后??
var a;
function a() {}
console.log(a) // fn
a = 123;
console.log(a) // 123
001、v-show與v-if的區別
v-show:操作的是元素的display屬性
v-if:操作的是元素的創建和插入
相比較而言v-show的性能要高
002、methods、computed、watch三者的區別
methods是個方法，執行的時候需要事件進行觸發
computed是一個計算屬性，是實時響應的，只要data中的屬性發生了變化那么就會觸發computed，計算屬 性是基于屬性的依賴進行緩存的，methods調用的時候需要加()，而computed調用的時候是不需要加()
watch屬性監聽，watch用來監聽屬性的變化，當值發生變化的時候來執行特定的函數，watch監聽屬性的時候 會有2個參數newVal和oldVal一個新值一個舊值
003、vue中自定義指令如何使用
Vue.directive():
參數1：指令名稱
參數2：指令實現的函數，在回調函數中第一次參數是指令綁定的元素，參數二是一個對象其中對象中有value 屬性代表的是表達式返回的結果，還有modifiers屬性是指令的修飾符
004、vue中組件創建的方式有哪些？
全局組件和局部組件
全局組件 Vue.component();參數1：組件名稱 參數2：組件的配置項
局部組件 new Vue({ components:{} key值為組件名稱 val值為組件的配置項 })
005、vue中的過濾器如何使用
Vue.filter()
參數1：過濾器名稱
參數2：過濾器實現的方法 該方法中有2個參數 參數1為需要過濾的數據，參數2為過濾器傳遞的參數
006、如何實現父子組件傳值、非父子組件傳值
父組件傳遞子組件： 通過屬性進行傳遞 接受用props屬性進行接受。 props屬性用來接收外部屬性。 在父組件中當子組件當作標簽使用的時候給子組件添加屬性，值為需要傳遞的值。在子組件內部通過props 進行接受。接受的方式有2種，第一種為數組接受，第二種為對象接受，推薦用第二種，對象形式的可以限制數據的類型
子組件傳父組件
方案一 在父組件中當子組件當作標簽使用的時候給子組件綁定自定義方法，子組件通過this.$emit()進行觸發。注意 自定義方法是不需要加()的
方案二 利用solt插槽作用域。
非父子組件傳值
方案一 創建公共的Vue對象。通過調用Vue中的$on() 、$emit()進行傳值。需要接受值得一方調用[圖片上傳失敗...(image-47d550-1575942099051)]
emit()方案二 利用觀察者模式封裝[圖片上傳失敗...(image-8a03a7-1575942099051)]
emit```
007、請說出vue中生命周期函數(鉤子函數)
1、beforeCreate():組件實例剛剛被創建 (el和data并未初始化)
2、created():組件創建完成,屬性已綁定,但DOM還未生成,$el屬性還不存在 (完成data數據的初始化)
3、beforeMount():模板編譯/掛載之前 (完成了el和data初始化)
4、Mounted():模板編譯/掛載之后 (完成掛載)
5、beforeUpdate():組件更新之前
6、updated()：組件更新之后
7、beforedestroy():組件銷毀之前
8、destroyed():組件銷毀之后
008、請解釋一下vue的中單向數據流的理解
數據從父級組件傳遞給子組件,只能單向綁定，子組件不能直接修改從父級傳遞過來的數據
數據只能從一個方向來修改狀態,如果父組件給N個子組件進行了數據傳遞。那么某一個子組件中修改了這個數 據，那么就會導致其他組件的數據也會發生改變。因此數據只能從一個方向來修改狀態
009、請說下什么是動態組件，如何使用，以及keep-alive的作用
動態組件： 讓多個組件使用同一個掛載點，并動態進行切換。這就是動態組件
通過保留<component></component> 元素，動態的綁定它的is特性，可以實現動態組件
keep-alive 包裹動態組件(組件)時，會緩存不活動的組件實例，而不是銷毀它們
組件切換調用的時候本身會被銷毀掉的，只要加上keep-alive進行包裹，就不會被銷毀，而是被緩存起來， 下一次使用的時候直接從緩存中調用
010、請說下組件的生命周期有哪些？
activated && deactivated:
activated：當組件為活躍狀態的時候觸發(活躍狀態：進入頁面的時候)
deactivated：緩存狀態的時候觸發
011、vue中solt的使用方式，以及solt作用域插槽的用法
使用方式： 當組件當做標簽進行使用的時候，用slot可以用來接受組件標簽包裹的內容，當給solt標簽添加name屬性的 時候，可以調換響應的位置
插槽作用域： 作用域插槽其實就是帶數據的插槽，父組件接收來自子組件的slot標簽上通過v-bind綁定進而傳遞過來的數 據，父組件通過scope來進行接受子組件傳遞過來的數據
012、為什么在組件內部data是一個函數而不是一個對象？
因為每次調用組件的時候都會重新生成一個對象,如果是一個對象的情況下，data數據會進行復用(因為對象是引 用數據類型),而當data是一個函數的時候每次調用的時候就會返回一個新的對象
013、vue中動畫如何實現
哪個元素需要動畫就給那個元素加transition標簽
進入時class的類型分為以下幾種 <name>-enter <name>-enter-active <name>-enter-to
離開時class的類型分為以下幾種
<name>-leave <name>-leave-active <name>-leave-to
如果需要一組元素發生動畫需要用標簽<transition-group><transition-group>
014、淺談對路由的理解
什么是路由？ 根據不同的url地址展示不同的頁面或者數據。
路由分為前端路由，和后端路由
前端路由： 1、前端路由多用于單頁面開發，也就是SPA。
2、前端路由是不涉及到服務器的，是前端利用hash或者HTM5的historyApi來實現的，一般用于不同的內 容展示和切換
015、路由跳轉的方式有哪幾種？
1、a標簽進行跳轉。例如<a href="#/home">首頁<a>
2、router-link進行跳轉 例如：<router-link to="/home">首頁<router-link>
3、編程式路由 例如：this.$router.push()
016、路由傳值的方式有哪幾種
1、path路徑屬性傳值。例如：path:"/home/:id/name"; 接受的時候通過 this.[圖片上傳失敗...(image-b23227-1575942099051)]
route.query
3、路由解耦。在配置路由的時候添加props屬性為true,在需要接受參數的組件頁面通過props進行接受
4、編程式導航 this.$router.push({path:"/home",query:{}});
017、請說出路由配置項常用的屬性及作用
路由配置參數： path : 跳轉路徑
component : 路徑相對于的組件
name:命名路由
children:子路由的配置參數(路由嵌套)
props:路由解耦
redirect : 重定向路由
018、編程式導航使用的方法以及常用的方法
路由跳轉 ： this.$router.push()
路由替換 : this.$router.replace()
后退： this.$router.back()
前進 ：this.$router.forward()
019、如何重定向路由
通過配置路由項中的redirect進行重定向
020、如何實現路由解耦
在路由的配置項中設置props:true 在需要接受組件的內部通過props進行接受
021、如何檢測路由參數的變化
通過屬性監聽來實現或者beforeRouterUpdate()
watch:{
"$router"(){
}
}
beforeRouterUpdate(to,from,next);
022、什么是路由守衛？路由的鉤子函數有哪些？分別說出使用的場景，及用法
1、什么是路由守衛？ 路由跳轉前后做的一些驗證
2、路由常見的鉤子函數 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的場景 beforeRouteEnter:當路由進入之前:登陸驗證、熱力圖的記錄、
beforeRouteUpdate:當路由進行更新的時候。如果當前路由發生了變化，但是不需要組件的創建銷毀的過程的 時候，就需要用到這個鉤子函數
beforeRouterLeave:當路由離開的時候、當用戶沒有進行支付離開的時候、當用戶填寫完信息沒有保存的時 候......
023、什么是全局守衛
beforeEach:全局守衛。驗證用戶是否登陸
router.beforeEach((to,from,next)=>{
//登陸狀態
let status = false;
//所以路由組建的name名字
const nextRouter = ["two","three","detail"];
if(nextRouter.indexOf(to.name)>=0){
if(!status){ router.push({name:"login"})
}else{
next();
}
}else{
next();
}
})
024、axios與jquery的ajax有什么不同
axios的優點：
1、從nodejs中創建http請求
2、支持promiseAPI
3、提供了一些并發請求的接口
4、自動轉換json數據
5、客戶端支持防止CSRF/XSRF
ajax的缺點：
1、jQuery項目龐大，單純的使用ajax卻要引入整個Jquery非常不合理
2、基于原生的XHR開發，但是XHR架構并不清晰
025、簡述vuex的數據傳遞流程
當組件進行數據修改的時候我們需要調用dispatch來觸發actions里面的方法。actions里面的每個方法中都會 有一個commit方法，當方法執行的時候會通過commit來觸發mutations里面的方法進行數據的修改。 mutations里面的每個函數都會有一個state參數，這樣就可以在mutations里面進行state的數據修改 ，當數據修改完畢后，會傳導給頁面。頁面的數據也會發生改變
026、雙向數據綁定的原理
vue實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和 設置屬性值(set)的操作來實現的。
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回 這個對象。
027、使用vue的時候會一下子加載所有的東西使得初始化頁面很卡，該如何解決？
vue-router解決首次加載緩慢的問題。懶加載簡單來說就是按需加載。
像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時， 需要加載的內容過多，時間過長，會出現長時間的白屏，即使做了loading也是不利于用戶體驗，而運用懶加載 則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。
用法：在配置路由時使用：component:resolve=>require([“@components/路由的路徑”]，resolve)。 就是用了懶加載后打完包直接運行那個index.html會報錯，報文件引用錯誤其實是打包時候路徑配置有點問 題，找到build下面的webpack.prod.conf.js 添加 publicPath："./",
028、vue中的scoped
- 在vue組件中，在style標簽上添加scoped屬性，以表示它的樣式作用于當下的模塊，很好的實現了樣式私有 化的目的，這是一個非常好的機制。
- scoped肯定是解決了樣式私有化的問題，但同時也引入了新的問題---樣式不易（可）修改，而很多時候， 我們是需要對公共組件的樣式做微調的。所以我才說要謹慎使用 。
029、vue路由傳值params和query的區別
1.query傳參和接收參數
傳參: this.[圖片上傳失敗...(image-b98e52-1575942099050)]
route.query.id
注意:傳參是this.[圖片上傳失敗...(image-f34e4d-1575942099050)]
route,這里千萬要看清了！！！
2.params傳參和接收參數
傳參: this.[圖片上傳失敗...(image-13014d-1575942099050)]
route.params.id
二者還有點區別，直白的來說query相當于get請求，頁面跳轉的時候，可以在地址欄看到請求參數，而 params相當于post請求，參數不會再地址欄中顯示
030、跨域的方式
1、jsonp
2、正向代理 用http-proxy-middleware模塊 app.use("/api",proxy({ target:"協議+域名", changeOrigin:true }))
3、cors PHP中
031、在Vue中使用插件的步驟
- 采用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
- 使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
032、請列舉出3個Vue中常用的生命周期鉤子函數
created: 實例已經創建完成之后調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, $el屬性目前還不可見
-
mounted: el被新創建的 vm.[圖片上傳失敗...(image-4e8f73-1575942099049)]
el 也在文檔內。
activated: keep-alive組件激活時調用 033、第一次頁面加載會觸發哪幾個鉤子 第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
034、簡單描述每個周期具體適合哪些場景
-
beforecreate: 可以在這加個loading事件，在加載實例時觸發 -
created: 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用 -
mounted: 掛載元素，獲取到DOM節點 -
updated: 如果對數據統一處理，在這里寫上相應函數 -
beforeDestroy: 可以做一個確認停止事件的確認框 -
nextTick: 更新數據后立即操作dom
035、Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決？
Vue路由在Android機上有問題，babel問題，安裝babel polypill 插件解決。
036、vuex有哪幾種屬性(modules)
有五種，分別是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
A、Vuex就是一個倉庫，倉庫里面放了很多對象。其中state就是數據源存放地，對應于一般Vue對象里面的 data
B、state里面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個 數據的組件也會發生更新
C、它通過mapState、mapGetters把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中vuex的Getter特性
A、getters 可以對State進行計算操作，它就是Store的計算屬性
B、 雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間復用
C、 如果一個狀態只在一個組件內使用，是可以不用gettersvuex的Mutation特性 Action 類似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態；Action 可以包 含任意異步操作。
作者：汶沐
鏈接：http://www.lxweimin.com/p/76f972cbc7b8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
