Vue.js是什么

Vue.js是一個漸進式j(luò)avascript框架潭枣，漸進式就是由淺入深悼嫉、由簡單到復(fù)雜的方式去使用Vue.js文虏。Vue的核心是一個允許采用簡潔的模版語法來聲明式地將數(shù)據(jù)渲染進DOM的系統(tǒng)节视。
Vue有響應(yīng)式和雙向綁定特性论皆。
響應(yīng)式就是修改data中的數(shù)據(jù)益楼，視圖的數(shù)據(jù)也會發(fā)生改變，雙向綁定是針對表單元素点晴，比如文本框中輸入的數(shù)據(jù)發(fā)生改變視圖的數(shù)據(jù)也會改變感凤。
組件化應(yīng)用構(gòu)建：
組件系統(tǒng)是Vue的另一個重要概念，因為它是一個抽象粒督，允許我們使用小型陪竿、獨立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。所有界面都可以抽象為一個組件樹族跛。
Vue中的所有組件都是Vue實例闰挡，我們只看到根組件有new Vue()，但是在子組件中并沒有礁哄，為什么子組件也是Vue實例长酗，那是因為webpack編譯的時候會使用vue-loader去處理這些vue文件，生成一個個vue組件定義桐绒。

當(dāng)一個Vue實例被創(chuàng)建時夺脾，它將data對象中的所有屬性加入到Vue的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時茉继，視圖將會產(chǎn)生響應(yīng)咧叭，即匹配更新為新的值。當(dāng)這些數(shù)據(jù)改變時烁竭，視圖會進行重渲染菲茬。值得注意的是只有當(dāng)實例被創(chuàng)建時data中存在的屬性才是響應(yīng)式的。這里唯一的例外是使用 Object.freeze()派撕，這會阻止修改現(xiàn)有的屬性生均，也意味著響應(yīng)系統(tǒng)無法再追蹤變化。

生命周期鉤子函數(shù)給了用戶在不同階段添加自己代碼的機會腥刹。不要在選項屬性或回調(diào)上使用箭頭函數(shù)马胧，比如 created: () => console.log(this.a)。因為箭頭函數(shù)沒有this衔峰，this會作為變量一直向上查找佩脊，經(jīng)常導(dǎo)致報錯。

指令是帶有v-前綴的特殊特性垫卤。指令特性的值預(yù)期是單個javascript表達式(v-for是例外情況)威彰。

動態(tài)參數(shù)

可以用方括號括起來的javascript表達式作為一個指令的參數(shù)：

<a v-bind:[attributeName]="url">...</a>

這里的attributeName會被作為一個javascript表達式進行動態(tài)求值，如果你的Vue實例有一個data屬性attributeName穴肘，其值為href歇盼，那么這個綁定將等價于v-bind:href。
注意：如果返回的是非字符串則會觸發(fā)警告评抚，并且方括號中不能有空格或者引號豹缀，變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種復(fù)雜表達式慨代。

計算屬性和偵聽器

計算屬性

背景

模版內(nèi)的表達式非常便利邢笙，但是設(shè)計它們的初衷是用于簡單運算的。在模版中放入太多的邏輯會讓模版過重且難以維護侍匙。所以對于任何復(fù)雜邏輯氮惯，你都應(yīng)當(dāng)使用計算屬性。
例如：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

從上面的例子中我們可以看到vm.reversedMessage 的值始終取決于 vm.message 的值。你可以像綁定普通屬性一樣在模版中綁定計算屬性妇汗。Vue知道vm.reversedMessage 依賴于 vm.message帘不，因此當(dāng)vm.message發(fā)生改變時，所有依賴vm.reversedMessage的綁定也會更新杨箭。我們可以得出結(jié)論厌均，data中定義的數(shù)據(jù)和computed中定義的數(shù)據(jù)都是響應(yīng)式的。

計算屬性緩存vs方法

背景：
我們?yōu)槭裁葱枰彺娓嫠簦考僭O(shè)我們有一個性能開銷比較大的方法A，它需要遍歷一個巨大的數(shù)組并做大量的計算晶密。然后我們可能有很多地方需要調(diào)用A擒悬。如果沒有緩存，我們將會多次執(zhí)行方法A稻艰，造成性能的浪費懂牧。這時候我們可以使用計算屬性緩存的方式來代替。

我們可以用計算屬性也可以直接在表達式中調(diào)用方法來達到同樣的效果：

<p>{{reverseMessage()}}</p>

不管是計算屬性還是方法得到的結(jié)果都是相同的尊勿。然后不同的是：計算屬性是基于它們的響應(yīng)式依賴進行緩存的僧凤。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。這就意味著只要message還沒有發(fā)生變化元扔，多次訪問reversedMessage計算屬性會立即返回之前的計算結(jié)果躯保，而不必再次執(zhí)行函數(shù)。比如：頁面上有多個地方訪問reversedMessage澎语，那么它只會計算一次途事，返回的結(jié)果相同，但如果是用方法的話擅羞，訪問幾次就會調(diào)用幾次尸变。

計算屬性的setter

計算屬性默認(rèn)只有g(shù)etter，不過在需要時你也可以提供一個setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

現(xiàn)在再運行vm.fullName = 'john doe'時减俏，setter會被調(diào)用召烂，vm.firstName和vm.lastName也會相應(yīng)地更新。

偵聽器watch

背景

雖然計算屬性在大多數(shù)情況下更合適娃承，但有時也需要一個自定義的偵聽器奏夫。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化历筝。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時桶蛔，這個方式是最有用的。

計算屬性可以直接在模版還有js中使用漫谷，主要用在簡單邏輯的運算上仔雷，而且是同步不能是異步的情況下使用，它必須返回的是一個數(shù)值，而watch可以用于異步或者復(fù)雜運算上碟婆，兩者在某種程度上功能可以重合的电抚，不過使用場景也有所不同

Class與Style綁定

綁定Class

有兩種方式一種是對象一種是數(shù)組

<div :class="{ active: isActive }" class="static"></div>

如果是對象，那么active是class名竖共，isActive可以是布爾值也可以是js表達式但是最終一定會被轉(zhuǎn)為布爾值蝙叛。
綁定的class也可以寫在computed或data中

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

數(shù)組語法

可以是變量

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

可以是三目運算

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

可以是對象和變量

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

用在組件上

<my-component :class="baz boo"></my-component>

綁定內(nèi)聯(lián)樣式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>

變量都可以綁定到data或computed中。

條件渲染

用key管理可復(fù)用的元素

【Vue會盡可能高效地渲染元素公给，通常會復(fù)用已有元素而不是從頭開始渲染借帘。這么做除了使vue變得非常快之外淌铐，還有其他一些好處肺然。例如，如果你允許用戶在不同的登錄方式之間切換：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代碼中切換 loginType 將不會清除用戶已經(jīng)輸入的內(nèi)容腿准。因為兩個模板使用了相同的元素际起，<input> 不會被替換掉——僅僅是替換了它的 placeholder。
這樣也不總是符合實際需求吐葱，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的街望，不要復(fù)用它們”。只需添加一個具有唯一值的 key 屬性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

使用場景：比如之前做的情報墻有多個圖表循環(huán)切換的時候就會出現(xiàn)樣式問題弟跑，這時候可以給它們一個key就有可能避免這種情況灾前。

維護狀態(tài)

當(dāng)Vue正在更新使用v-for渲染的元素列表時，它默認(rèn)使用就地更新的策略孟辑。如果數(shù)據(jù)項的順序被改變豫柬，Vue將不會移動DOM元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素扑浸，并且確保它們在每個索引位置正確渲染烧给。這個默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時DOM狀態(tài)(例如：表單輸入值)的列表渲染輸出喝噪。
為了給Vue一個提示础嫡，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素酝惧，你需要為每項提供一個唯一的key屬性榴鼎。
簡單的理解：比如一個輸入框列表，在第一個輸入框中輸入了數(shù)值晚唇，把第一個輸入框和第二個位置互換就會發(fā)現(xiàn)輸入的數(shù)值還是在第一個輸入框里巫财，并沒有隨著第一個輸入框位置的改變而改變
文章：https://juejin.im/post/5c2746b4e51d450d50306db2
https://www.zhihu.com/question/61078310

數(shù)組更新監(jiān)測

除了以下兩種方式無法監(jiān)測其他情況都可以監(jiān)測。
由于js的限制哩陕，vue不能監(jiān)測以下數(shù)組 的變動：
1.當(dāng)你利用索引值設(shè)置一個數(shù)組項時平项，也就是說改變數(shù)組中的某一個元素的值赫舒，例如vm.items[indexOfItem] = newValue
2.當(dāng)你修改數(shù)組的長度時，例如：vm.items.length = newLength
舉個例子：

let vm = new Vue({
   data () {
       items: ['a', 'b', 'c']
   },
})
vm.items[1] = 'x'  // 不是響應(yīng)式的闽瓢，不會觸發(fā)dom更新
vm.items.length = 2  // 不是響應(yīng)式的接癌，不會觸發(fā)dom更新

解決方法：
第一類問題解決方案：

vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)

第二類問題解決方案：

vm.items.splice(newLength)

對象變更檢測注意事項

還是由于js的限制，vue不能檢測對象屬性的添加或刪除
總結(jié)：Vue不能檢測到數(shù)組和對象某個元素的變化扣讼，導(dǎo)致數(shù)據(jù)發(fā)生變化但是頁面沒有響應(yīng)

在v-for里使用值范圍

v-for不僅可以接受數(shù)組缺猛、對象，還可以接受整數(shù)椭符。在這種情況下荔燎，它會把模版重復(fù)對應(yīng)次數(shù)。

<div>
   <span v-for="n in 10">{{n}}</span>
</div>

v-for與v-if一同使用

不推薦在同一個元素上使用v-if和v-for销钝。當(dāng)它們處于同一節(jié)點有咨，v-for的優(yōu)先級比v-if更高。

在組件上使用v-for

<my-component v-for="item in items" :key="item.id"></my-component>

事件處理

監(jiān)聽事件的幾種寫法

直接寫在html中

<div id="example1">
   <button v-on:click="counter += 1">Add 1</button>
  <p>{{ counter }}</p>
</div>
new Vue ({
  el: '#example1',
  data: {
     counter: 0
  }
})

這里適合比較簡單的代碼邏輯

事件處理方法

如果是比較復(fù)雜的代碼邏輯一般會直接寫在methods中曙搬，有時需要在內(nèi)聯(lián)語句處理器中訪問原始的DOM事件「肷可以用特殊變量$event把它傳入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
new Vue({
  methods: {
    warn: function (message, event) {
    // 現(xiàn)在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
    }
  }
})

事件修飾符

passive修飾符

Vue對應(yīng)addEventListener中的passive選項提供了.passive修飾符纵装。

// 滾動事件的默認(rèn)行為(即滾動行為)將會立即觸發(fā)，而不會等待onScroll完成
// 這其中包含event.preventDefault()的情況
<div v-on:scroll.passive="onScroll">...</div>

這個.passive修飾符尤其能夠提升移動端的性能据某。注意不要把.passive和.prevent一起使用橡娄，因為.prevent將會被忽略。

.exact修飾符

.exact修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件癣籽。例如：

<!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時候才觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) -->
<button @click.exact="onClick">A</button>

鼠標(biāo)按鈕修飾符

• .left
• .right
• .middle

表單輸入綁定

基本用法

你可以用v-model指令在表單<inut>挽唉、<textarea>和<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定。v-model本質(zhì)上不過是語法糖筷狼。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)瓶籽，并對一些極端場景進行一些特殊處理。
v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

• text和textarea元素使用value屬性和input事件埂材；
• checkbox和radio使用checked屬性和 change事件塑顺；
• select字段將value作為prop并將change作為事件；

Vue雙向綁定

很多時候我們在理解Vue的時候都把Vue的數(shù)據(jù)響應(yīng)理解為雙向綁定俏险，但實際上這是不正確的严拒，我們之前提到的數(shù)據(jù)響應(yīng)，都是通過數(shù)據(jù)的改變?nèi)ヲ?qū)動DOM的變化竖独，而雙向綁定已有數(shù)據(jù)驅(qū)動DOM外裤唠，DOM的變化反過來影響數(shù)據(jù)，是一個雙向關(guān)系莹痢，在Vue中种蘸，我們可以通過v-model來實現(xiàn)雙向綁定墓赴。
v-model既可以作用在普通表單元素上，又可以作用在組件上劈彪，它其實是一個語法糖竣蹦。

<input
  v-bind:value="message"
  v-on:input="message=$event.target.value">
<span>{{message}}</span>
new Vue({
   data () {
       return { message: '' }
   }
})

這樣子就實現(xiàn)了vue數(shù)據(jù)的雙向綁定，當(dāng)input輸入的值發(fā)生改變時就會觸發(fā)input事件沧奴，將當(dāng)前輸入框的值賦值給message痘括，這時候頁面的數(shù)據(jù)就會發(fā)生改變，頁面的數(shù)據(jù)message發(fā)生改變時滔吠，因為input輸入框綁定的是data中message的值纲菌，所以也會發(fā)生改變。這樣子就實現(xiàn)了數(shù)據(jù)的雙向綁定疮绷。所以說v-model實際上就是語法糖翰舌。

修飾符

.lazy

默認(rèn)情況下，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步冬骚。你可以添加lazy修飾符椅贱，從而轉(zhuǎn)變?yōu)槭褂胏hange事件進行同步

<input v-model.lazy="msg">

.number

如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給v-model添加number修飾符：

<input v-mode.number="age" type="number">

這通常很有用只冻，因為即使在 type="number" 時庇麦，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析喜德，則會返回原始的值山橄。

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給v-model添加trim修飾符舍悯。

組件基礎(chǔ)

data必須是一個函數(shù)

我們在定義組件的時候航棱，你會發(fā)現(xiàn)它的data并不是像這樣直接提供一個對象：

data: {
   count: 0
}

取而代之的是，一個組件的data選項必須是一個函數(shù)萌衬，因此每個實例可以維護一份被返回對象的獨立的拷貝：

data () {
   return {
      count: 0
   }
}

一個組件就是一個vue實例饮醇，同樣也是一個對象，如果一個組件在一個項目中被多次使用秕豫，表示這個組件對象被復(fù)制了多次驳阎，它們都是指向同一個引用地址，如果直接給data賦值一個對象馁蒂，那么改變其中一個組件中data的值呵晚，那么其他的組件data中的值也會發(fā)生改變，這不是我們想要的沫屡，所以為了保證每個組件對象互相獨立饵隙，可以使用function return的方式來實現(xiàn)，因為function每次都會return一個對象沮脖，這個地方是新創(chuàng)建的金矛，所以就不會存在上述問題芯急。

使用事件拋出一個值

有時候用一個事件來拋出一個特定的值非常有用。例如我們可能想讓<blog-post>組件決定它的文本要放大多少驶俊。這時候可以使用$emit的第二個參數(shù)來提供這個值：

<button v-on:click="$emit('enlarge-text', 1)">
   Enlarge text
</button>

然后當(dāng)在父級組件監(jiān)聽這個事件的時候娶耍，我們可以通過$event訪問到被拋出的這個值：

<blog-post
  v-on:enlarge-text="postFontSize += $event"
>
</blog-post>

$event既可以是dom元素的值也可以是這個dom元素還可以是子組件傳過來的值

在組件上使用v-model，實現(xiàn)父子組件的雙向綁定

自定義事件也可以用于創(chuàng)建支持v-model的自定義輸入組件饼酿。記组啪啤：

<input v-model="searchText">

等價于：

<input 
v-bind:value="searchText"
v-on:input="searchText="$event.target.value"">

當(dāng)用在組件上時，v-model則會這樣：

<template>
 <div id="demo">
  <test-model v-model="haorooms"></test-model>
  <span>{{haorooms}}</span>
</div>
</template>
<script>
    import testModel from './testModel'
    export default {
        watch: {
            haorooms(val) {
                console.log('haorooms', val)
            }
        },
      data(){
            return{
                 haorooms: 111
            }
        },
        components: {
            testModel,
        }
    }
</script>

子組件

<template>
    <div>
        <input
        ref="input"
        :value="haorooms"
        @input="$emit('input', $event.target.value)">
    </div>
</template>
<script>
    export default {
        props: ["haorooms"]
    }
</script>

Vue 是單項數(shù)據(jù)流故俐，v-model 只是語法糖而已
參考文章：https://www.haorooms.com/post/vue_vmodel

Vue組件化

概念

Vue的一個核心思想就是組件化想鹰，什么是組件化？組件化就是把頁面拆分成多個組件药版，每個組件依賴的CSS辑舷、JavaScript、模版槽片、圖片等資源放在一起開發(fā)和維護何缓。組件是資源獨立的，組件在系統(tǒng)內(nèi)部可復(fù)用还栓，組件和組件之間可以互相嵌套碌廓，并且會對外暴露接口方便別的組件調(diào)用。
組件可以是一個模塊也可以是一個功能蝙云，比如導(dǎo)航氓皱、下拉菜單路召、時間控件等等都可以勃刨。

組件化的特性

• 高內(nèi)聚性：組件功能必須是完整的，最好是單一的股淡，一個組件只負(fù)責(zé)一個功能身隐。
• 低耦合度：通俗來說，代碼獨立不會和頁面中的其他代碼發(fā)生沖突唯灵。如果用以前的框架去編寫代碼贾铝，比如一個頁面只有一個html文件，所有CSS埠帕、JS垢揩、HTML代碼都寫在這個文件上，那么這個文件會非常大敛瓷，經(jīng)常上千行叁巨，很不利于開發(fā)和維護，如果去掉某個功能呐籽，牽扯的代碼很多锋勺，很容易出現(xiàn)問題蚀瘸，現(xiàn)在一個頁面分為很多個組件，組件之間互相獨立庶橱，就會避免這種問題贮勃。

組件化的優(yōu)點

• 方便重復(fù)使用
• 提高了開發(fā)效率
• 簡化調(diào)試步驟
• 提升整個項目的可維護性
• 便于協(xié)同開發(fā)

組件化解決的問題

組件化開發(fā)是為了解決復(fù)雜業(yè)務(wù)邏輯的開發(fā)思想，解決多人多團隊協(xié)作難苏章，組件化思想可以幫助我們?nèi)ケM可能做到：誰開發(fā)寂嘉，誰負(fù)責(zé)；誰管理布近，誰維護垫释；職責(zé)清晰，溝通簡單方便撑瞧。

單頁面應(yīng)用(SPA)

單頁面應(yīng)用是指只有一個瀏覽器頁面的應(yīng)用棵譬，在瀏覽器中運行期間不會重新加載頁面，之后所有的交互操作都在一個頁面上完成预伺，這些都是通過切換vue-router匹配不同的vue組件來顯示不同的頁面內(nèi)容订咸。
多頁面應(yīng)用(MPA)：是指一個應(yīng)用中有多個頁面，頁面跳轉(zhuǎn)時是整頁刷新酬诀。

單頁面應(yīng)用的好處

• 用戶體驗好脏嚷，快，內(nèi)容的改變不需要重新加載整個頁面瞒御，基于這一點SPA對服務(wù)器壓力較小父叙。從性能和用戶體驗的層面來比較的話，后端路由每次訪問一個新頁面的時候都要向服務(wù)器發(fā)送請求肴裙，然后服務(wù)器再響應(yīng)請求趾唱，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已蜻懦，沒有了網(wǎng)絡(luò)延遲甜癞，對于用戶體驗來說會有相當(dāng)大的提升。
• 單頁面應(yīng)用沒有頁面之間的切換宛乃，就不會出現(xiàn)"白屏現(xiàn)象"悠咱，也不會出現(xiàn)假死并有"閃爍"現(xiàn)象。
• 良好的前后端分離征炼。后端不再負(fù)責(zé)模版渲染析既、輸出頁面工作，只需要出數(shù)據(jù)就可以谆奥，后端API通用化眼坏，即同一套后端程序代碼，不用修改就可以用于web界面雄右、手機空骚、平板等客戶端纺讲。

單頁面應(yīng)用的缺點

• 首次加載耗時比較多：為實現(xiàn)單頁Web應(yīng)用功能及顯示效果，需要在加載頁面的時候?qū)avaScript囤屹、CSS統(tǒng)一加載熬甚，部分頁面可以在需要的時候加載。所以必須對JavaScript及CSS代碼進行合并壓縮處理肋坚，如果使用第三方庫乡括，建議使用一些大公司的CDN，因此帶寬的消耗是必然的智厌。
• SEO難度較高：由于所有的內(nèi)容都在一個頁面中動態(tài)替換顯示诲泌，所以搜索引擎只能捕獲到后端返回的數(shù)據(jù)，無法捕獲到整個HTML的數(shù)據(jù)铣鹏。

單頁應(yīng)用實現(xiàn)原理

單頁應(yīng)用是指在瀏覽器中運行的應(yīng)用敷扫，在使用期間頁面不會重新加載。當(dāng)點擊導(dǎo)航時诚卸，通過哈希監(jiān)聽事件葵第，如果哈希發(fā)生了變化，則改變哈希值：window.location.hash合溺，來調(diào)用相應(yīng)的js文件卒密。
相應(yīng)的js文件里面可以放相應(yīng)的數(shù)據(jù)模板，當(dāng)用ajax請求并返回數(shù)據(jù)時棠赛，渲染模板哮奇，生成相應(yīng)的DOM結(jié)構(gòu)，再插入對應(yīng)的page 的div中睛约。
基本原理:以 hash 形式（也可以使用 History API 來處理）為例鼎俘，當(dāng) url 的 hash 發(fā)生改變時，觸發(fā) hashchange 注冊的回調(diào)痰腮，回調(diào)中去進行不同的操作而芥，進行不同的內(nèi)容的展示律罢。

為什么單頁面應(yīng)用和vue-router有關(guān)系膀值，是因為單頁面應(yīng)用不會重新加載頁面，只是通過改變hash來匹配顯示不同的組件误辑。所以單頁面應(yīng)用是基于vue-router和組件來實現(xiàn)的沧踏。

首先vue是單頁面應(yīng)用，導(dǎo)致了切換成其他頁面不會改變url巾钉，這時候發(fā)現(xiàn)改變hash路由不會觸發(fā)url讓頁面重新渲染翘狱，所以就用hash來做vue路由，這也是vue路由的由來砰苍。vue路由就是用來匹配對應(yīng)的組件潦匈。