一，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'}
网友评论