當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

router vue 动态改变url_2020年 vue常见面试问题总结(干货)！

發(fā)布時(shí)間：2024/9/27 vue 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 router vue 动态改变url_2020年 vue常见面试问题总结(干货)！小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.什么是mvvm模式，談?wù)勀愕睦斫?#xff1f;

MVVM - Model View ViewModel，數(shù)據(jù)，視圖，視圖模型
view 可以通過(guò) 事件綁定的方式影響 model，
model 可以通過(guò) 數(shù)據(jù)綁定的形式影響到view，
viewModel是把 model 和 view 連起來(lái)的橋梁，
這樣就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。

2.vue構(gòu)建初始化工程的步驟（vuecli3）？

終端執(zhí)行：

1.npm install -g @vue/cli
2.vue create hello-world
3.cd hello-world
4.npm run serve

3.列舉幾個(gè)vuecli 項(xiàng)目目錄中文件夾以及它們的作用？

|-- dist # 打包后文件夾

|-- public # 靜態(tài)文件夾

| |-- favicon.ico

| |-- index.html #入口頁(yè)面

|-- src # 源碼目錄

| |--assets # 模塊資源

| |--components # vue組件

| |--views # 視圖文件

| |--App.vue # 公共主組件

| |--main.js # 入口文件，加載公共組件

| |--router.js # 路由配置

|-- vue.config.js # 配置文件

|-- .gitignore

|-- babel.config.js # babel語(yǔ)法編譯

|-- package.json # 項(xiàng)目基本信息，npm包管理

4.談?wù)剉uecli如何解決本地調(diào)用api的跨域問(wèn)題？

以vuecli3為例，配置vue.config.js中的proxy

module.exports = {devServer: {proxy: {'/api': {target:'http://xxxxxx',//api地址changeOrigin:true, //是否跨域secure: false, //https改為truepathRewrite: {'^/api' : ''},}},host: 'localhost', // can be overwritten by process.env.HOSTport: 8080, },publicPath: './', }

5.vue.js 的優(yōu)點(diǎn)？

漸進(jìn)式框架，只關(guān)注視圖層，mvvm架構(gòu)模式實(shí)現(xiàn)數(shù)據(jù)的雙向綁定；
數(shù)據(jù)驅(qū)動(dòng)，組件系統(tǒng)；
體積小，速度快。

6.vue.js雙向綁定的原理？

利用Object.defineProperty()這個(gè)方法重新定義了對(duì)象獲取屬性值（get）和設(shè)置屬性值（set）的操作來(lái)實(shí)現(xiàn)的。

7.vue頁(yè)面不重新渲染？

或者調(diào)用this.$forceUpdate()方法

8.請(qǐng)談?wù)勀銓?duì)vue.js 生命周期的理解？

1.什么是vue.js的生命周期：Vue 實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過(guò)程，我們稱這是 Vue 的生命周期。

2.各個(gè)生命周期的作用

9.在那個(gè)生命周期下調(diào)用異步請(qǐng)求？

mounted和created下都可以，本人建議是在created下調(diào)用。

10.為什么vue中組件里面的data是一個(gè)函數(shù)而不是一個(gè)對(duì)象呢？

因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例，如果data仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用一個(gè)數(shù)據(jù)對(duì)象，通過(guò)提供data函數(shù)，每次創(chuàng)建一個(gè)新的實(shí)例之后，我們能夠調(diào)用data函數(shù)從而返回一個(gè)全新的副本數(shù)據(jù)對(duì)象，這樣每一個(gè)實(shí)例都有自己私有的數(shù)據(jù)空間不會(huì)互相影響

11.vue-router路由模式有幾種？請(qǐng)談?wù)勀銓?duì)它們的理解？

常用的路由模式有hash和history；

最直觀的區(qū)別是hash模式url上會(huì)攜帶有一個(gè)#，而history不攜帶；

hash:

即地址欄URL中的#符號(hào)，它的特點(diǎn)在于hash值雖然出現(xiàn)在URL中，但不會(huì)被包括在HTTP請(qǐng)求中，對(duì)服務(wù)端完全沒(méi)影響，因此改變hash值不會(huì)重新加載頁(yè)面。

history:

利用了HTML5 History interface 中新增的pushState() 和 replaceState()方法。

這兩個(gè)方法應(yīng)用于瀏覽器歷史記錄棧，提供了修改歷史記錄的功能，執(zhí)行修改時(shí)雖然改變了URL但是不會(huì)立即的向服務(wù)端發(fā)起請(qǐng)求。

因此可以說(shuō)

hash和history模式都屬于瀏覽器自身的特性，vue-router只是利用了這兩個(gè)特性來(lái)實(shí)現(xiàn)前端路由

但是在history模式下會(huì)出現(xiàn)刷新404的問(wèn)題，對(duì)于這個(gè)問(wèn)題，我們只需要在服務(wù)器配置nginx如果URL匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認(rèn)的index.html

location /{root /data/nginx/html;index index.html index.htm;if (!-e $request_filename) {rewrite ^/(.*) /index.html last;break;}}

12.vue-router傳參方式以及如何獲取參數(shù)？

通過(guò)router.js文件中配置path的地方動(dòng)態(tài)傳遞參數(shù)，'/detail/:id'
傳遞的時(shí)候 this.$router.push({name:"",params:{id:""}})
獲取的時(shí)候 this.$route.params.id
或者用query的方式 this.$route.query.id

13.vue-router有幾種常用的路由守衛(wèi)，談?wù)勊麄兏髯缘淖饔?#xff1f;

守衛(wèi)的種類：

全局前置守衛(wèi)

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ... })

全局后置守衛(wèi)

router.afterEach((to, from) => {// ... })

全局解析守衛(wèi)

在 2.5.0+ 你可以用 router.beforeResolve 注冊(cè)一個(gè)全局守衛(wèi); 這和 router.beforeEach 類似; 區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。

路由獨(dú)享守衛(wèi)

const router = new VueRouter({routes: [{path: '/',component: Index,beforeEnter: (to, from, next) => {// ...}}] })

14.如何使用vuex？

第一步安裝

npm install vuex -S

第二步創(chuàng)建store.js

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //創(chuàng)建Vuex實(shí)例對(duì)象 const store = new Vuex.Store({strict:debug,//在不是生產(chǎn)環(huán)境下都開啟嚴(yán)格模式state:{},getters:{},mutations:{},actions:{} }) export default store;

第三步注入vuex

import Vue from 'vue'; import App from './App.vue'; import store from './store'; const vm = new Vue({store:store,render: h => h(App) }).$mount('#app')

15.vuex中有幾個(gè)核心屬性，分別是什么？

一共有5個(gè)核心屬性，分別是:

state 唯一數(shù)據(jù)源,Vue 實(shí)例中的 data 遵循相同的規(guī)則
getters 可以認(rèn)為是 store 的計(jì)算屬性,就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問(wèn)這些值。

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}} })store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

mutation 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,非常類似于事件,通過(guò)store.commit 方法觸發(fā)

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 變更狀態(tài)state.count++}} })store.commit('increment')

action Action 類似于 mutation，不同在于Action 提交的是 mutation，而不是直接變更狀態(tài)，Action 可以包含任意異步操作

const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {context.commit('increment')}} })

module 由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。

const moduleA = {state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... } }const moduleB = {state: () => ({ ... }),mutations: { ... },actions: { ... } }const store = new Vuex.Store({modules: {a: moduleA,b: moduleB} })store.state.a // -> moduleA 的狀態(tài) store.state.b // -> moduleB 的狀態(tài)

16.axios請(qǐng)求代碼應(yīng)該寫在組件的methods中還是vuex的actions中

如果請(qǐng)求來(lái)的數(shù)據(jù)是不是要被其他組件公用，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入vuex 的state里。
如果被其他地方復(fù)用，這個(gè)很大幾率上是需要的，如果需要，請(qǐng)將請(qǐng)求放入action里，方便復(fù)用。

17.從vuex中獲取的數(shù)據(jù)能直接更改嗎？

從vuex中取的數(shù)據(jù)，不能直接更改，需要淺拷貝對(duì)象之后更改，否則報(bào)錯(cuò)；

18.vuex中的數(shù)據(jù)在頁(yè)面刷新后數(shù)據(jù)消失

用sessionstorage 或者 localstorage 存儲(chǔ)數(shù)據(jù)

存儲(chǔ)： sessionStorage.setItem( '名', JSON.stringify(值) ) 使用： sessionStorage.getItem('名') ---得到的值為字符串類型，用JSON.parse()去引號(hào)；

19.mutation和action有什么區(qū)別

action 提交的是 mutation，而不是直接變更狀態(tài)。mutation可以直接變更狀態(tài)
action 可以包含任意異步操作。mutation只能是同步操作
提交方式不同

action 是用this.store.dispatch('ACTION_NAME',data)來(lái)提交。 mutation是用this.$store.commit('SET_NUMBER',10)來(lái)提交

接收參數(shù)不同，mutation第一個(gè)參數(shù)是state，而action第一個(gè)參數(shù)是context，其包含了

{state, // 等同于 `store.state`，若在模塊中則為局部狀態(tài)rootState, // 等同于 `store.state`，只存在于模塊中commit, // 等同于 `store.commit`dispatch, // 等同于 `store.dispatch`getters, // 等同于 `store.getters`rootGetters // 等同于 `store.getters`，只存在于模塊中 }

20.在v-model上怎么用Vuex中state的值？

需要通過(guò)computed計(jì)算屬性來(lái)轉(zhuǎn)換。

<input v-model="message"> // ... computed: {message: {get () {return this.$store.state.message},set (value) {this.$store.commit('updateMessage', value)}} }

21.請(qǐng)談?wù)剋atch,computed以及methods的區(qū)別？

computed一般是一個(gè)依賴值衍生新的值，值結(jié)果會(huì)被緩存，除非依賴值發(fā)生變化才會(huì)重新計(jì)算( eg：購(gòu)物車結(jié)算 )
watch一般監(jiān)聽一個(gè)對(duì)象鍵值是需要觀察的變量或者表達(dá)式，鍵值對(duì)應(yīng)是回調(diào)函數(shù)，主要是負(fù)責(zé)監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯
methods方法表示一個(gè)具體的操作，負(fù)責(zé)書寫主要業(yè)務(wù)邏輯

22.說(shuō)出幾個(gè)vue.js常用指令？

v-model
v-for
v-text
v-html
v-on
v-bind
v-if
v-show
v-cloak
暢所欲言...

23.v-show與v-if有什么區(qū)別？

v-if

是真正的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。

v-show

就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 的 display 屬性進(jìn)行切換。
所以，v-if 適用于在運(yùn)行時(shí)很少改變條件，不需要頻繁切換條件的場(chǎng)景；v-show 則適用于需要非常頻繁切換條件的場(chǎng)景。

24.class和style如何動(dòng)態(tài)綁定？

1.Class 可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定：

對(duì)象語(yǔ)法：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>data: {isActive: true,hasError: false }

數(shù)組語(yǔ)法：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' }

2.Class 可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定：

對(duì)象語(yǔ)法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 }

數(shù)組語(yǔ)法：

<div v-bind:style="[styleColor, styleSize]"></div> data: { styleColor: {color: 'red'}, styleSize:{fontSize:'23px'} }

25.vue事件修飾符以及各個(gè)的作用？

.stop:阻止事件冒泡
.native:綁定原生事件
.once:事件只執(zhí)行一次
.self 將事件綁定在自身身上，相當(dāng)于阻止事件冒泡
.prevent:阻止默認(rèn)事件
.passive: 2.3.0 新增,滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā),不能和.prevent 一起使用

26.vue中獲取dom的方式？

在標(biāo)簽中加上ref='dom'，然后在代碼中this.$refs.dom這樣就拿到了頁(yè)面元素

例如：<div class='box' ref='myBox'>你好</div>

讓你好的顏色顯示為紅色：this.$refs.myBox.style.color = 'red

27.vue中$nextTick的使用？

vue中DOM的異步更新，提前獲取更新之后的DOM this.$nextTick(()=>{})

28.vue初始化頁(yè)面會(huì)出現(xiàn)閃動(dòng)問(wèn)題，該如何解決？

在App.vue 根dom上面加一個(gè)v-cloak，css內(nèi)加一個(gè)[v-cloak] { display: none；}

29.vue如何優(yōu)化頁(yè)面加載？

UI組件庫(kù)盡量使用cdn的方式引入；
配置路由懶加載的方式；
增加loading圖,提升用戶體驗(yàn)

30.v-on可以監(jiān)聽多個(gè)方法嗎？

可以監(jiān)聽多個(gè)不同類型的方法，不可以監(jiān)聽同一種事件

31.列舉vue組件通信的幾種方式？

32.父組件和子組件生命周期執(zhí)行的順序？

1.加載渲染過(guò)程：

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate

-> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 2.子組件更新過(guò)程：

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated 3.父組件更新過(guò)程：

父 beforeUpdate -> 父 updated 4.銷毀過(guò)程：

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

33.父組件可以監(jiān)聽到子組件的生命周期嗎？

@hook:監(jiān)聽的生命周期 = "自定義事件名"

// Parent.vue<Child @hook:mounted="doSomething" ></Child> doSomething() { console.log('父組件監(jiān)聽到 mounted 鉤子函數(shù) ...');}, // Child.vue mounted(){ console.log('子組件觸發(fā) mounted 鉤子函數(shù) ...');}, // 以上輸出順序?yàn)?#xff1a; // 子組件觸發(fā) mounted 鉤子函數(shù) ... // 父組件監(jiān)聽到 mounted 鉤子函數(shù) ...

34.vue引入組件的步驟？

1.script 里面用import 引入組件
2.在export default里面用components:{}注冊(cè)組件名字
3.在template中掛載組件

35.談?wù)剬?duì)keep-alive的了解？

一般是用來(lái)配合路由緩存組件

36.ES6常用知識(shí)點(diǎn)？

https://www.cnblogs.com/ainyi/p/8537027.html

37.談?wù)勀銓?duì)深淺拷貝的理解？

本質(zhì)區(qū)別在于復(fù)制的是引用還是復(fù)制的實(shí)例
所謂淺拷貝是僅僅復(fù)制了引用，換句話說(shuō)復(fù)制的變量和被復(fù)制的指向是同一個(gè)引用，彼此之間操作會(huì)互相影響
深拷貝是將原對(duì)象層級(jí)屬性一一復(fù)制，相當(dāng)于直接復(fù)制的實(shí)例，形成兩個(gè)獨(dú)立的對(duì)象，彼此操作不會(huì)互相影響，
實(shí)現(xiàn)深拷貝的方式一般有遞歸遍歷
es6 實(shí)現(xiàn)數(shù)組深拷貝的方法：var arr2 = [...arr1] or var arr2 = Array.from(arr1)
或者是通過(guò)json對(duì)象來(lái)實(shí)現(xiàn)var newObj=JSON.parse(JSON.stringfy(obj))

38.說(shuō)出你了解的前端安全問(wèn)題以及解決方案？

xss跨站腳本攻擊
CSRF跨站請(qǐng)求偽造
sql注入
https://blog.csdn.net/m0_48446542/article/details/108271860

.......未完待續(xù)

總結(jié)

以上是生活随笔為你收集整理的router vue 动态改变url_2020年 vue常见面试问题总结(干货)！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：【MATLAB】 csvwrite数据缺
下一篇： element upload预览_vue