面試題 大全

一,Vue-router 中hash模式和history模式的關(guān)系

前端路由的核心,就在于 —— 改變視圖的同時不會向后端發(fā)出請求

1,最直觀的區(qū)別就是在url中 hash 帶了一個很丑的 # 而history是沒有#的

2,hash 雖然出現(xiàn)在 URL 中,但不會被包括在 HTTP 請求中,對后端完全沒有影響,因此改變 hash 不會重新加載頁面

3,hash模式背后的原理是onhashchange事件,可以在window對象上監(jiān)聽這個事件:

window.onhashchange = function(event){

? ? console.log(event.oldURL, event.newURL);

? ? let hash = location.hash.slice(1);

? ? document.body.style.color = hash;

}

4,history 利用了 HTML5 新增的 pushState() 和 replaceState() 方法

5,history 前進(jìn) 后退 不調(diào)用接口 刷新 會調(diào)用接口

6,history 通過 pushState() 設(shè)置的新 UR 可以是與當(dāng)前 URL 同源的任意 URL,而 hash 只可修改 # 后面的部分,因此只能設(shè)置與當(dāng)前 URL 同文檔的 URL

7,history 模式下,前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致

8,history 需在后端(Apache 或 Nginx)進(jìn)行簡單的路由配置

二, vue2?當(dāng)利用數(shù)組索引改變數(shù)組某一項時,頁面不會刷新 ,數(shù)據(jù)更新了,視圖沒更新。

調(diào)用方法: Vue.set( target , key , value)

target: 要更改的數(shù)據(jù)源(可以是一個對象或者數(shù)組)

key 要更改的具體數(shù)據(jù) (索引)

value 重新賦的值

demo:

<template>

?<divid="app">

??<pv-for="item in items":key="item.id">{{item.message}}</p>

??<buttonclass="btn"@click="handClick()">更改數(shù)據(jù)</button>

?</div>

</template>


<script>

export default {

?name: 'App',

?data () {

??return {

???items: [

????????{ message: "one", id: "1" },

????????{ message: "two", id: "2" },

????????{ message: "three", id: "3" }

??????]

??}

?},

?mounted () {

???this.items[0] = { message:'first',id:'4'} //此時對象的值更改了,但是視圖沒有更新

??// let art = {message:'first',id:"4"}

??// this.$set(this.items,0,art) //$set 可以觸發(fā)更新視圖

?},

?methods: {

??handClick(){

???let change = this.items[0]

???change.message="shen"

???this.$set(this.items,0,change)

??}

?}

}

</script>


<style>


</style>

三,

說說var、let、const的區(qū)別

1,一、var聲明的變量會掛載在window上,而let和const聲明的變量不會

var a = 100;

console.log(a,window.a);? ? // 100 100

let b = 10;

console.log(b,window.b);? ? // 10 undefined

const c = 1;

console.log(c,window.c);? ? // 1 undefined


2,var聲明變量存在變量提升,let和const不存在變量提升

console.log(a); // undefined ===> a已聲明還沒賦值,默認(rèn)得到undefined值

var?a = 100;

console.log(b); // 報錯:b is not defined? ===> 找不到b這個變量

let?b = 10;

console.log(c); // 報錯:c is not defined? ===> 找不到c這個變量

const?c = 10;

3,let和const聲明形成塊作用域

if(1){

var a = 100;

letb = 10;

}

console.log(a); // 100

console.log(b)? // 報錯:b is not defined? ===> 找不到b這個變量

if(1){

vara = 100;constc= 1;}

console.log(a);

// 100console.log(c)// 報錯:c is not defined? ===> 找不到c這個變量


4,同一作用域下let和const不能聲明同名變量,而var可以

var?a = 100;

console.log(a); // 100

var?a = 10;

console.log(a); // 10

let a = 100;

let a = 10;

//? 控制臺報錯:Identifier 'a' has already been declared? ===> 標(biāo)識符a已經(jīng)被聲明了。




5, const定義的值能改么?

1、一旦聲明必須賦值,不能使用null占位。

*

*2、聲明后不能再修改

*

*3、如果聲明的是復(fù)合類型數(shù)據(jù),可以修改其屬性

const定義的基本類型不能改變,但是定義的對象是可以通過修改對象屬性等方法來改變的 ,這樣改。

const aaaaaa={aa:'dd'}

aaaaaa.aa='bb'

console.log(aaaaaa)

const a = 100;

const list = [];

list[0] = 10;

console.log(list);  // [10]

const obj = {a:100};

obj.name = 'apple';

obj.a = 10000;

console.log(obj);  // {a:10000,name:'apple'}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容