一,Vue-router 中hash模式和history模式的關(guān)系
前端路由的核心,就在于 —— 改變視圖的同時(shí)不會向后端發(fā)出請求
1,最直觀的區(qū)別就是在url中 hash 帶了一個(gè)很丑的 # 而history是沒有#的
2,hash 雖然出現(xiàn)在 URL 中,但不會被包括在 HTTP 請求中,對后端完全沒有影響,因此改變 hash 不會重新加載頁面
3,hash模式背后的原理是onhashchange事件,可以在window對象上監(jiān)聽這個(gè)事件:
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 必須和實(shí)際向后端發(fā)起請求的 URL 一致
8,history 需在后端(Apache 或 Nginx)進(jìn)行簡單的路由配置
二, vue2?當(dāng)利用數(shù)組索引改變數(shù)組某一項(xiàng)時(shí),頁面不會刷新 ,數(shù)據(jù)更新了,視圖沒更新。
調(diào)用方法: Vue.set( target , key , value)
target: 要更改的數(shù)據(jù)源(可以是一個(gè)對象或者數(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'} //此時(shí)對象的值更改了,但是視圖沒有更新
??// 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ào)錯(cuò):b is not defined? ===> 找不到b這個(gè)變量
let?b = 10;
console.log(c); // 報(bào)錯(cuò):c is not defined? ===> 找不到c這個(gè)變量
const?c = 10;
3,let和const聲明形成塊作用域
if(1){
var a = 100;
letb = 10;
}
console.log(a); // 100
console.log(b)? // 報(bào)錯(cuò):b is not defined? ===> 找不到b這個(gè)變量
if(1){
vara = 100;constc= 1;}
console.log(a);
// 100console.log(c)// 報(bào)錯(cuò):c is not defined? ===> 找不到c這個(gè)變量
4,同一作用域下let和const不能聲明同名變量,而var可以
var?a = 100;
console.log(a); // 100
var?a = 10;
console.log(a); // 10
let a = 100;
let a = 10;
//? 控制臺報(bào)錯(cuò):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'}