當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/9/27 vue 32 豆豆

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

1.什么是mvvm模式，談談你的理解？

MVVM - Model View ViewModel，數據，視圖，視圖模型
view 可以通過事件綁定的方式影響 model，
model 可以通過數據綁定的形式影響到view，
viewModel是把 model 和 view 連起來的橋梁，
這樣就實現了數據的雙向綁定。

2.vue構建初始化工程的步驟（vuecli3）？

終端執行：

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

3.列舉幾個vuecli 項目目錄中文件夾以及它們的作用？

|-- dist # 打包后文件夾

|-- public # 靜態文件夾

| |-- favicon.ico

| |-- index.html #入口頁面

|-- src # 源碼目錄

| |--assets # 模塊資源

| |--components # vue組件

| |--views # 視圖文件

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

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

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

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

|-- .gitignore

|-- babel.config.js # babel語法編譯

|-- package.json # 項目基本信息，npm包管理

4.談談vuecli如何解決本地調用api的跨域問題？

以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 的優點？

漸進式框架，只關注視圖層，mvvm架構模式實現數據的雙向綁定；
數據驅動，組件系統；
體積小，速度快。

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

利用Object.defineProperty()這個方法重新定義了對象獲取屬性值（get）和設置屬性值（set）的操作來實現的。

7.vue頁面不重新渲染？

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

8.請談談你對vue.js 生命周期的理解？

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

2.各個生命周期的作用

9.在那個生命周期下調用異步請求？

mounted和created下都可以，本人建議是在created下調用。

10.為什么vue中組件里面的data是一個函數而不是一個對象呢？

因為組件可能被用來創建多個實例，如果data仍然是一個純粹的對象，則所有的實例將共享引用一個數據對象，通過提供data函數，每次創建一個新的實例之后，我們能夠調用data函數從而返回一個全新的副本數據對象，這樣每一個實例都有自己私有的數據空間不會互相影響

11.vue-router路由模式有幾種？請談談你對它們的理解？

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

最直觀的區別是hash模式url上會攜帶有一個#，而history不攜帶；

hash:

即地址欄URL中的#符號，它的特點在于hash值雖然出現在URL中，但不會被包括在HTTP請求中，對服務端完全沒影響，因此改變hash值不會重新加載頁面。

history:

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

這兩個方法應用于瀏覽器歷史記錄棧，提供了修改歷史記錄的功能，執行修改時雖然改變了URL但是不會立即的向服務端發起請求。

因此可以說

hash和history模式都屬于瀏覽器自身的特性，vue-router只是利用了這兩個特性來實現前端路由

但是在history模式下會出現刷新404的問題，對于這個問題，我們只需要在服務器配置nginx如果URL匹配不到任何靜態資源，就跳轉到默認的index.html

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

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

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

13.vue-router有幾種常用的路由守衛，談談他們各自的作用？

守衛的種類：

全局前置守衛

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

全局后置守衛

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

全局解析守衛

在 2.5.0+ 你可以用 router.beforeResolve 注冊一個全局守衛; 這和 router.beforeEach 類似; 區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用。

路由獨享守衛

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

14.如何使用vuex？

第一步安裝

npm install vuex -S

第二步創建store.js

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //創建Vuex實例對象 const store = new Vuex.Store({strict:debug,//在不是生產環境下都開啟嚴格模式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中有幾個核心屬性，分別是什么？

一共有5個核心屬性，分別是:

state 唯一數據源,Vue 實例中的 data 遵循相同的規則
getters 可以認為是 store 的計算屬性,就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。Getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值。

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 中的狀態的唯一方法是提交 mutation,非常類似于事件,通過store.commit 方法觸發

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

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

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

module 由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。為了解決以上問題，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 的狀態 store.state.b // -> moduleB 的狀態

16.axios請求代碼應該寫在組件的methods中還是vuex的actions中

如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state里。
如果被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用。

17.從vuex中獲取的數據能直接更改嗎？

從vuex中取的數據，不能直接更改，需要淺拷貝對象之后更改，否則報錯；

18.vuex中的數據在頁面刷新后數據消失

用sessionstorage 或者 localstorage 存儲數據

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

19.mutation和action有什么區別

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

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

接收參數不同，mutation第一個參數是state，而action第一個參數是context，其包含了

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

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

需要通過computed計算屬性來轉換。

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

21.請談談watch,computed以及methods的區別？

computed一般是一個依賴值衍生新的值，值結果會被緩存，除非依賴值發生變化才會重新計算( eg：購物車結算 )
watch一般監聽一個對象鍵值是需要觀察的變量或者表達式，鍵值對應是回調函數，主要是負責監聽某些特定數據的變化，從而進行某些具體的業務邏輯
methods方法表示一個具體的操作，負責書寫主要業務邏輯

22.說出幾個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有什么區別？

v-if

是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

v-show

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

24.class和style如何動態綁定？

1.Class 可以通過對象語法和數組語法進行動態綁定：

對象語法：

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

數組語法：

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

2.Class 可以通過對象語法和數組語法進行動態綁定：

對象語法：

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

數組語法：

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

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

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

26.vue中獲取dom的方式？

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

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

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

27.vue中$nextTick的使用？

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

28.vue初始化頁面會出現閃動問題，該如何解決？

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

29.vue如何優化頁面加載？

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

30.v-on可以監聽多個方法嗎？

可以監聽多個不同類型的方法，不可以監聽同一種事件

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

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

1.加載渲染過程：

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

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

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated 3.父組件更新過程：

父 beforeUpdate -> 父 updated 4.銷毀過程：

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

33.父組件可以監聽到子組件的生命周期嗎？

@hook:監聽的生命周期 = "自定義事件名"

// Parent.vue<Child @hook:mounted="doSomething" ></Child> doSomething() { console.log('父組件監聽到 mounted 鉤子函數 ...');}, // Child.vue mounted(){ console.log('子組件觸發 mounted 鉤子函數 ...');}, // 以上輸出順序為： // 子組件觸發 mounted 鉤子函數 ... // 父組件監聽到 mounted 鉤子函數 ...

34.vue引入組件的步驟？

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

35.談談對keep-alive的了解？

一般是用來配合路由緩存組件

36.ES6常用知識點？

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

37.談談你對深淺拷貝的理解？

本質區別在于復制的是引用還是復制的實例
所謂淺拷貝是僅僅復制了引用，換句話說復制的變量和被復制的指向是同一個引用，彼此之間操作會互相影響
深拷貝是將原對象層級屬性一一復制，相當于直接復制的實例，形成兩個獨立的對象，彼此操作不會互相影響，
實現深拷貝的方式一般有遞歸遍歷
es6 實現數組深拷貝的方法：var arr2 = [...arr1] or var arr2 = Array.from(arr1)
或者是通過json對象來實現var newObj=JSON.parse(JSON.stringfy(obj))

38.說出你了解的前端安全問題以及解決方案？

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

.......未完待續

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【MATLAB】 csvwrite数据缺
下一篇：基于蓝墨云平台的计算机教学,基于蓝墨云班