面试题 大全

2022-02-28  本文已影响0人  undefined汪少

一,Vue-router 中hash模式和history模式的关系

前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求

1,最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的

2,hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面

3,hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

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 前进 后退 不调用接口 刷新 会调用接口

6,history 通过 pushState() 设置的新 UR 可以是与当前 URL 同源的任意 URL,而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL

7,history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致

8,history 需在后端(Apache 或 Nginx)进行简单的路由配置

二, vue2 当利用数组索引改变数组某一项时,页面不会刷新 ,数据更新了,视图没更新。

调用方法: Vue.set( target , key , value)

target: 要更改的数据源(可以是一个对象或者数组)

key 要更改的具体数据 (索引)

value 重新赋的值

demo:

<template>

 <divid="app">

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

  <buttonclass="btn"@click="handClick()">更改数据</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 可以触发更新视图

 },

 methods: {

  handClick(){

   let change = this.items[0]

   change.message="shen"

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

  }

 }

}

</script>

<style>

</style>

三,

说说var、let、const的区别

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已声明还没赋值,默认得到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  ===> 标识符a已经被声明了。

5, const定义的值能改么?

1、一旦声明必须赋值,不能使用null占位。

*

*2、声明后不能再修改

*

*3、如果声明的是复合类型数据,可以修改其属性

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'}

上一篇下一篇

猜你喜欢

热点阅读