1. 簡單介紹一下你對vue框架的理解?
   1.1 vue中MVVM的理解

• 描述:
  M：模型（Model）：數(shù)據(jù)模型暑椰；負責數(shù)據(jù)存儲见咒。泛指后端進行的各種業(yè)務邏輯處理和數(shù)據(jù)操控洽议，主要圍繞數(shù)據(jù)庫系統(tǒng)展開宗收。
  V：View 視圖： 負責頁面展示，也就是用戶界面绞铃。主要由 HTML 和 CSS 來構建
  VM：視圖模型（View-Model）： 負責業(yè)務邏輯處理（比如Ajax請求等）镜雨，對數(shù)據(jù)進行加工后交給視圖展示
  通過vue類創(chuàng)建的對象叫Vue實例化對象，這個對象就是MVVM模式中的VM層儿捧，模型通過它可以將數(shù)據(jù)綁定到頁面上，視圖可以通過它將數(shù)據(jù)映射到模型上
• 優(yōu)點:
  1.低耦合挑宠。視圖（View）可以獨立于Model變化和修改菲盾，
  2.可重用性。你可以把一些視圖邏輯放在一個ViewModel里面各淀，讓很多view重用這段視圖邏輯
  3.前后端分離懒鉴，開發(fā)人員可以專注于業(yè)務邏輯（ViewModel）和數(shù)據(jù)的開發(fā)，設計人員可以專注于頁面設計

1.2 漸進式: 為什么說VUE是一個漸進式的javascript框架, 漸進式是什么意思？

• VUE允許你將一個網頁分割成可復用的組件临谱，每個組件都包含屬于自己的HTML璃俗、CSS、JAVASCRIPT以用來渲染網頁中相應的地方悉默。對于VUE的使用可大可小城豁，它都會有相應的方式來整合到你的項目中。所以說它是一個漸進式的框架抄课。VUE是響應式的（reactive）這是VUE最獨特的特性唱星，也就是說當我們的數(shù)據(jù)變更時，VUE會幫你更新所有網頁中用到它的地方跟磨。

2. vue生命周期:

• beforeCreate（創(chuàng)建前） ：組件實例被創(chuàng)建之初间聊，組件的屬性生效之前 //beforeCreate生命周期執(zhí)行的時候，data和methods中的數(shù)據(jù)都還沒有初始化抵拘。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法
• created（創(chuàng)建后） ：組件實例已經完全創(chuàng)建哎榴，屬性也綁定，但真實 dom 還沒有生成僵蛛，$el 還不可用 // data 和 methods都已經被初始化好了尚蝌，如果要調用 methods 中的方法，或者操作 data 中的數(shù)據(jù)墩瞳，最早可以在這個階段中操作
• beforeMount（掛載前） ：在掛載開始之前被調用：相關的 render 函數(shù)首次被調用
  //執(zhí)行到這個鉤子的時候驼壶，在內存中已經編譯好了模板了，但是還沒有掛載到頁面中喉酌，此時热凹，頁面還是舊的
• mounted（掛載后） ：在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子
  //到mounted周期的時候泪电，Vue實例已經初始化完成了般妙。此時組件脫離了創(chuàng)建階段，進入到了運行階段相速。 如果我們想要通過插件操作頁面上的DOM節(jié)點碟渺，最早可以在和這個階段中進行
• beforeUpdate（更新前） ：組件數(shù)據(jù)更新之前調用，真實DOM還沒被渲染
  // 當執(zhí)行這個鉤子時突诬，頁面中的顯示的數(shù)據(jù)還是舊的苫拍，data中的數(shù)據(jù)是更新后的，頁面還沒有和最新的數(shù)據(jù)保持同步
• update（更新后） ：組件數(shù)據(jù)更新之后 //頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經保持同步了旺隙，都是最新的
• activated（激活前） ：keep-alive專屬绒极，組件被激活時調用 //當組件被切回來時，再去緩存里找這個組件蔬捷、觸發(fā) activated鉤子函數(shù)垄提。
• deactivated（激活后） ：keep-alive專屬榔袋，組件被銷毀時調用 //當組件被換掉時，會被緩存到內存中铡俐、觸發(fā) deactivated 生命周期
• beforeDestory（銷毀前） ：組件銷毀前調用//Vue實例從運行階段進入到了銷毀階段凰兑，這個時候上所有的 data 和 methods ， 指令审丘， 過濾器 ……都是處于可用狀態(tài)吏够。還沒有真正被銷毀
• destoryed（銷毀后） ：組件銷毀前調用 //這個時候上所有的 data 和 methods ， 指令备恤， 過濾器 ……都是處于不可用狀態(tài)稿饰。組件已經被銷毀了。

3. 指令:
   v-el 作用是什么: 提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標露泊『砹可以是 CSS 選擇器，也可以是一個 HTMLElement 實例惭笑。

4. $nextTick原理及運用

• nextTick是啥?

  • Vue.nextTick( [callback, context] )：在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調侣姆。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM沉噩。

• 為什么需要它呢?

  • Vue是異步執(zhí)行dom更新的捺宗，一旦觀察到數(shù)據(jù)變化，Vue就會開啟一個隊列川蒙，然后把在同一個事件循環(huán) (event loop)
  • 當中觀察到數(shù)據(jù)變化的 watcher 推送進這個隊列蚜厉。如果這個watcher被觸發(fā)多次，只會被推送到隊列一次畜眨。
  • 這種緩沖行為可以有效的去掉重復數(shù)據(jù)造成的不必要的計算和DOm操作昼牛。而在下一個事件循環(huán)時，Vue會清空隊列康聂，并進行必要的DOM更新贰健。
  • 假使你設置 vm.someData = 'new value'，DOM 并不會馬上更新恬汁，而是在異步隊列被清除伶椿，也就是下一個事件循環(huán)
  • 開始時執(zhí)行更新時才會進行必要的DOM更新。如果此時你想要根據(jù)更新的 DOM 狀態(tài)去做某些事情氓侧，就會出現(xiàn)問題脊另。
  • 為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 约巷。
    這樣回調函數(shù)在 DOM 更新完成后就會調用尝蠕。

• 我在什么地方用它呢?

  • 1、在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調函數(shù)中载庭。
    原因是在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，
    所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數(shù)中囚聚。與之對應的就是mounted鉤子函數(shù)靖榕，
    因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題 顽铸。
  • 2茁计、在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結構的時候
    (譬如v-if/v-show根據(jù)字段變化顯隱)谓松，這個操作都應該放進Vue.nextTick()的回調函數(shù)中星压。

5. Vue實現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）

• vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter鬼譬，getter娜膘，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應監(jiān)聽回調优质。
• vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口竣贪，整合Observer，Compile和Watcher三者巩螃，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化演怎，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁避乏，達到數(shù)據(jù)變化 —>視圖更新爷耀；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。

6. 動態(tài)給vue的data添加一個新的屬性時為什么不刷新拍皮？怎樣解決?

• 如果為對象添加少量的新屬性歹叮，可以直接采用Vue.set()
• 如果需要為新對象添加大量的新屬性，則通過Object.assign()創(chuàng)建新對象
• 如果你實在不知道怎么操作時春缕，可采取$forceUpdate()進行強制刷新 (不建議)
• PS：vue3是用過proxy實現(xiàn)數(shù)據(jù)響應式的盗胀，直接動態(tài)添加新屬性仍可以實現(xiàn)數(shù)據(jù)響應式

7. vue中key的原理及其必要性

• vue中key作用：key是給每一個vnode的唯一id，也是diff的一種優(yōu)化策略锄贼，可以根據(jù)key票灰，更準確， 更快的找到對應的vnode節(jié)點
• key是每一個節(jié)點的唯一標識
• 必要性：當我們對數(shù)據(jù)進行更新的時候宅荤，譬如在數(shù)組中插入屑迂、移除數(shù)據(jù)時，設置的key值能讓vue底層高效的對新舊vnode進行diff冯键，然后將比對出的結果用來更新真實的DOM

vue基礎語法: 修飾符

1. Vue常用的修飾符及其使用
   修飾符是用于限定類型以及類型成員的聲明的一種符號, 常見修飾符種類：

• 表單修飾符

//lazy惹盼、trim、number

//光標離開標簽的時候惫确，才會將值賦予給value
<input type="text" v-model.lazy="value">
//過濾用戶輸入的首尾空格字符手报，注意蚯舱，如果是中間的空格則不會過濾
<input type="text" v-model.trim="value">
//自動將用戶的輸入值轉為數(shù)值類型，但如果這個值無法被parseFloat解析掩蛤，則會返回原來的值
<input v-model.number="age" type="number">

• 事件修飾符

//stop枉昏、prevent、self揍鸟、once兄裂、capture、passive阳藻、native

//阻止了事件冒泡
<button @click.stop="btn()">ok</button>
//阻止了事件的默認行為
<form v-on:submit.prevent="onSubmit"></form>
//只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù)
<div v-on:click.self="doSome">...</div>
//事件只能觸發(fā)一次
<button @click.once="btn()">ok</button>
//事件觸發(fā)從包含這個元素的頂層開始往下觸發(fā) //輸出結構: 1 2
<div @click.capture="btn(1)">
    1
    <div @click.capture="btn(2)">
        2
    </div>
</div>
/* 在移動端晰奖，當我們在監(jiān)聽元素滾動事件的時候，會一直觸發(fā)onscroll事件會讓我們的網頁變卡腥泥，
因此我們使用這個修飾符的時候匾南，相當于給onscroll事件整了一個.lazy修飾符*/
<div v-on:scroll.passive="onScroll">...</div>
/*讓組件變成像html內置標簽那樣監(jiān)聽根元素的原生事件，否則組件上使用 v-on 只會監(jiān)聽自定義事件
注意：使用.native修飾符來操作普通HTML標簽是會令事件失效的*/
<my-component v-on:click.native="doSomething"></my-component>

• 鼠標按鍵修飾符

//left 左鍵點擊道川、right 右鍵點擊午衰、middle 中鍵點擊

<button @click.left="btn('left')">ok</button>
<button @click.right="btn('right')">ok</button>
<button @click.middle="btn('middle')">ok</button>

• 鍵值修飾符

//onkeyup，onkeydown冒萄，后面需要跟keycode編碼名或者按鍵編碼
<input type="text" @keyup.keyCode="btn()">

• v-bind修飾符

//async臊岸、prop、camel

//能對props進行一個雙向綁定
//父組件
<comp :myMessage.sync="bar"></comp> 
//子組件
this.$emit('update:myMessage',params);

//上面代碼與以下代碼是等同的,實際上就是實現(xiàn)了獲取子組件信息處理并回傳
//父親組件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子組件js
func2(){
  this.$emit('update:myMessage',params);
}
注意：
1尊流、使用sync的時候帅戒，子組件傳遞的事件名格式必須為update:value，其中value必須與子組件中props中
聲明的名稱完全一致
2崖技、注意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用
3逻住、將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”迎献，是無法正常工作的

//設置自定義標簽屬性瞎访，避免暴露數(shù)據(jù)，防止污染HTML結構
<input id="uid" title="title1" value="1" :index.prop="index">

//將命名變?yōu)轳劮迕ㄓ趸校鐚iew-Box屬性名轉換為 viewBox
<svg :view-Box.camel="viewBox"></svg>

2. computed與watch的區(qū)別

• computed擅長處理的場景：一個數(shù)據(jù)受多個數(shù)據(jù)影響扒秸；watch擅長處理的場景：一個數(shù)據(jù)影響多個數(shù)據(jù)。
• 功能上：computed是計算屬性冀瓦，watch是監(jiān)聽一個值的變化伴奥，然后執(zhí)行對應的回調。
• 是否調用緩存：computed支持緩存翼闽，只有依賴數(shù)據(jù)發(fā)生改變,才會重新進行計算;而watch不支持緩存拾徙，數(shù)據(jù)變,直接會觸發(fā)相應的操作。
• 是否調用return：computed中的函數(shù)必須要用return返回感局，watch中的函數(shù)不是必須要用return尼啡。
• computed不支持異步 暂衡，當computed內有異步操作時無效，無法監(jiān)聽數(shù)據(jù)的變化;而watch支持異步玄叠。
• computed默認第一次加載的時候就開始監(jiān)聽古徒；watch默認第一次加載不做監(jiān)聽，如果需要第一次加載做監(jiān)聽读恃，添加immediate屬性，設置為true（immediate:true）

虛擬Dom

1. 虛擬DOM中key的作用：

• key是虛擬DOM對象的標識代态，當狀態(tài)中的數(shù)據(jù)發(fā)生變化時寺惫，Vue會根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】，隨后Vue進行【新虛擬DOM】的差異比較蹦疑，比較規(guī)則如下：

2. key的對比規(guī)則：

• 舊虛擬DOM中找到了與新虛擬DOM相同的key：
  • 若虛擬DOM中內容沒變西雀，直接使用之前的真實DOM
  • 若虛擬DOM中內容變了，則生成新的真實DOM歉摧，隨后替換掉頁面中之前的真實DOM
• 舊虛擬DOM中未找到與新虛擬DOM相同的key: 創(chuàng)建新的真實DOM艇肴，隨后渲染到頁面

3. 用index作為key可能會引發(fā)的問題：

• 若對數(shù)據(jù)進行：逆序添加、逆序刪除等破壞順序操作：會產生沒有必要的真實DOM更新 ===> 界面效果沒問底叁温，但效率低
• 如果結構中還包含輸入類的DOM：會產生錯誤DOM更新 ===> 界面有問題

4. 開發(fā)中如何選擇key再悼？

• 最好使用每條數(shù)據(jù)的唯一標識作為key，比如id膝但、手機號冲九、身份證號、學號等唯一值
• 如果不存在對數(shù)據(jù)的逆序添加跟束、逆序刪除等破壞順序操作莺奸，僅用于渲染列表用于展示，使用index作為key是沒有問題的

組件通訊

1. Vue子組件和父組件執(zhí)行順序

• 加載渲染過程：beforeCreate(父) —> created(父)—>beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子)—>mounted(父)
• 更新過程：beforeUpdate(父) —> beforeUpdate(子) —> update(子) —> update(父)
• 父組件更新：beforeUpdate(父) —> updated（父）
• 銷毀過程：beforeDestory(父) —> beforeDestory(子) —> destoryed(子) —> destoryed(父)

2. 非父子組件如何通訊?

• 在非父子組件通信時冀宴，可以使用通常的bus或者使用vuex灭贷，但是一些小項目上功能不是太復雜，
  而使用上面兩個又有點繁瑣略贮。這時甚疟，observable就是一個很好的選擇

3. Vue.observable

• Vue.observable，讓一個對象變成響應式數(shù)據(jù)刨肃。Vue 內部會用它來處理 data 函數(shù)返回的對象返回的對象可以直接用于渲染函數(shù)和計算屬性內古拴，并且會在發(fā)生變更時觸發(fā)相應的更新讹挎。也可以作為最小化的跨組件狀態(tài)存儲器

4. Vue組件間的參數(shù)傳遞

• 父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);
• 子組件傳給父組件：$emit方法傳遞參數(shù)
• 非父子組件間的數(shù)據(jù)傳遞憨募，兄弟組件傳值借用eventBus，就是創(chuàng)建一個事件中心见秽，相當于中轉站盔然，可以用它來傳遞事件和接收事件桅打。發(fā)送數(shù)據(jù)使用 on 接收

5. provide和inject使用

• provide和inject是用來實現(xiàn)父組件向深層的子組件傳值和接收的語法

// 祖先組件
provide(){
    return {
      // keyName: { name: this.name }, // value 是對象才能實現(xiàn)響應式，也就是引用類型
      keyName: this.changeValue // 通過函數(shù)的方式也可以[注意挺尾，這里是把函數(shù)作為value鹅搪，而不是this.changeValue()]
     // keyName: 'test' value 如果是基本類型，就無法實現(xiàn)響應式
    }
},
data(){
      return {
        msg:'初始mesg'
    }
},
methods: {
    changeValue(){
        this.msg= '改變后的msg'
    }
}  
  
// 后代組件
inject:['keyName']
create(){
    console.log(this.keyName) // 改變后的msg
}

6. mixins
   mixins是一種分發(fā)Vue組件中可復用功能的一種靈活方式遭铺±鍪粒混入對象可以包含任意組件選項。當組件使用混入對象時魂挂，所有混入對象的選項將被混入該組件本身的選項甫题。
   mixins是一個JavaScript對象，可以包含組件中的任意選項涂召，比如Vue實例中生命周期的各個鉤子函數(shù)坠非，也可以是data、components果正、methods或directives等

• 運用:

//mixin文件
export const myMixin={
    data(){
        return{
            msg:1
        }
    },
    created(){
        console.log('myMixin')
    },
    methods:{
        Fn(){
            console.log('myMixin')
        }
    }
}

//引入
<template>
    <div>運用mixin的組件</div>
</template>
<script>
    import {myMixin} from'目標文件路徑'
    export default{
        mixins:[myMixin]
    }
</script>

• 特點：

1炎码、在組件A對混入的數(shù)據(jù)做出更改后組件B獲取到的仍是混入初始設置的數(shù)據(jù)，組件間操作互不污染秋泳。
2潦闲、值為對象的如methods,components等，選項會被合并轮锥，組件會覆蓋混入對象的方法矫钓。
比如混入對象里有個方法A，組件里也有方法A舍杜，這時候在組件里調用的話新娜，執(zhí)行的是組件里的A方法。
3既绩、created,mounted等概龄，就會被合并調用，混合對象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調用饲握，
同一個鉤子函數(shù)里私杜，會先執(zhí)行混入對象的東西，再執(zhí)行本組件的救欧。
4衰粹、在mixins里面包含異步請求函數(shù)的時候，通過直接調用異步函數(shù)獲取返回數(shù)據(jù)

• 運用場景區(qū)別：

vuex：用來做狀態(tài)管理笆怠，可以看做全局變量铝耻，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改瓢捉。

mixins：可以定義共用的變量频丘，在每個組件中使用，引入組件中之后泡态，各個變量是相互獨立的搂漠，值的修改在組件中不會相互影響。

父子組件：父子組件相對來說比較獨立某弦，只是父組件將一部分使用子組件桐汤，而mixins更像是對于組件的拓展，并且組件可以對于混入的數(shù)據(jù)和方法進行多樣化操作刀崖。

vue中路由

1. Vue的路由實現(xiàn)：hash模式 和 history模式

• hash模式： 在瀏覽器中符號“#”惊科，#以及#后面的字符稱之為hash，用window.location.hash讀攘燎铡；
• 工作原理: 監(jiān)聽網頁的hash值變化 —> onhashchange事件, 獲取location.hash
• 使用 URL 的 hash 來模擬一個完整的 URL充活，于是當 URL 改變時蜂莉，頁面不會重新加載。
• 會給用戶好像跳轉了網頁一樣的感覺, 但是實際上沒有跳轉
• 主要用在單頁面應用(SPA)
• 特點：hash雖然在URL中混卵，但不被包括在HTTP請求中映穗；用來指導瀏覽器動作，對服務端安全無用幕随，hash不會重加載頁面蚁滋。
• history模式： history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致赘淮，history采用HTML5的新特性辕录；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改梢卸，以及popState事件的監(jiān)聽到狀態(tài)變更走诞。
• 工作原理: 主要利用 history.pushState() API 來改變URL, 而不刷新頁面.
• 其實一共有五種模式可以實現(xiàn)改變URL, 而不刷新頁面.
• 需要后臺配置支持, 如果輸入一個并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首頁

2. vue中的路由傳參:

//通過 params 傳參
this.$router.push({
        name: '目標組件名',
        params: {
          id: id
        }
      })
//接收：
this.$route.params

//通過 query 傳參
this.$router.push({
      path: '目標組件路徑',
      query: {
        id: id
      }
   })
//接收
this.$route.query
//區(qū)別：query使用path來引入，params使用name來引入蛤高，接收方式是this.$route.query.name和this.$route.params.name蚣旱，值得注意的是query傳遞的參數(shù)會顯示在url后面以?id=？形式展示戴陡。

//動態(tài)路由傳參
//直接調用$router.push 實現(xiàn)攜帶參數(shù)的跳轉
     this.$router.push({
       path: `/particulars/${id}`,
     })
//通過this.$route.params.id接收塞绿，可以看到，和上面?zhèn)鲄⒉灰粯拥氖俏覀冎苯影褎討B(tài)參數(shù)加在路徑后面實現(xiàn)動態(tài)路由

3. Vue 路由跳轉的幾種方式

• 1. router-link （聲明式路由）
• 2. router.push(編程式路由)
• 3. this.$router.push() (函數(shù)里面調用)
• 4. this.$router.replace() (用法同上,push)
• 5. this.$router.go(n)

vuex

1. vuex是什么恤批？怎么使用异吻？哪種功能場景使用它?
   • 是什么: vue框架中狀態(tài)管理。在main.js引入store注入开皿。新建一個目錄store 涧黄。場景有：單頁應用中篮昧，組件之間的狀態(tài)，
     音樂播放笋妥、登錄狀態(tài)懊昨、加入購物車等。
   • 屬性：State春宣、 Getter酵颁、Mutation 、Action月帝、 Module
   • State: state是數(shù)據(jù)源存放地躏惋，對應于一般Vue對象里面的data。state里面存放的數(shù)據(jù)是響應式的嚷辅，
     Vue組件從store中讀取數(shù)據(jù)簿姨，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個數(shù)據(jù)的組件也會發(fā)生更新
     需要通過mapState把全局 state 和 getters 映射到當前組件的 computed 計算屬性中簸搞。
   • Getter: getters 可以對State進行計算操作扁位，在多個組件間復用
   • Mutation 、Action: Action 類似于 mutation趁俊，不同在于Action 提交的是 mutation域仇，而不是直接變更狀態(tài)；Action 可以包含任意異步操作寺擂。
   • Module: Vuex允許我們將store分隔成模塊（module）暇务，每個模塊擁有自己的state，mutation怔软，action垦细，getter，甚至是嵌套子模塊
   • 使用場景: 一句話爽雄，不要為了使用vuex而去使用vuex蝠检，推薦組件間數(shù)據(jù)復用，記錄登錄及其它狀態(tài)值數(shù)據(jù)挚瘟，一些需要緩存的數(shù)據(jù)使用vuex都能達到很好的管理

2. vuex是什么叹谁？怎么使用？哪種功能場景使用它乘盖？

• vue框架中狀態(tài)管理焰檩。在main.js引入store注入。新建一個目錄store 订框。場景有：單頁應用中析苫，組件之間的狀態(tài)，音樂播放、登錄狀態(tài)衩侥、加入購物車等国旷。

3)vuex有哪幾種屬性？ : 有五種茫死，分別是 State跪但、 Getter、Mutation 峦萎、Action屡久、 Module。

• vuex的State特性:
  • Vuex就是一個倉庫爱榔，倉庫里面放了很多對象被环。其中state就是數(shù)據(jù)源存放地，對應于一般Vue對象里面的data详幽。
  • state里面存放的數(shù)據(jù)是響應式的筛欢，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變唇聘，依賴這個數(shù)據(jù)的組件也會發(fā)生更新悴能。
  • 通過mapState把全局 state 和 getters 映射到當前組件的 computed 計算屬性中。
• vuex的Getter特性
  • getters 可以對State進行計算操作雳灾，它就是Store的計算屬性。
  • 雖然在組件內也可以做計算屬性冯凹，但是getters 可以在多組件之間復用谎亩。
  • 如果一個狀態(tài)只在一個組件內使用，可以不用getters宇姚。
• vuex的Mutation特性
  • Action 類似于 mutation匈庭，不同在于：Action 提交的是 mutation，而不是直接變更狀態(tài)浑劳；Action 可以包含任意異步操作阱持。

4. 不用Vuex會帶來什么問題？

• 可維護性會下降魔熏，想修改數(shù)據(jù)要維護三個地方衷咽；
• 可讀性會下降，因為一個組件里的數(shù)據(jù)蒜绽，根本就看不出來是從哪來的镶骗；
• 增加耦合，大量的上傳派發(fā)躲雅，會讓耦合性大大增加鼎姊，Vue用Component本意就是為了減少耦合，現(xiàn)在這么用，和組件化的初衷相背相寇。

綜合:

1. SSR
   什么是ssr：Server-Side Rendering 我們稱其為SSR慰于，意為服務端渲染，展開說就是通過服務側完成頁面的 HTML 結構拼接的頁面處理技術唤衫，發(fā)送到瀏覽器婆赠，然后為其綁定狀態(tài)與事件，成為完全可交互頁面的過程
   ssr作用：

seo：搜索引擎優(yōu)先爬取頁面HTML結構战授，使用ssr時页藻，服務端已經生成了和業(yè)務想關聯(lián)的HTML，有利于seo
首屏呈現(xiàn)渲染：用戶無需等待頁面所有js加載完成就可以看到頁面視圖（壓力來到了服務器植兰，所以需要權衡哪些用服務端渲染份帐，哪些交給客戶端）
缺點：

項目復雜度高
需要庫的支持性，代碼兼容
服務器負載變大楣导，相對于前后端分離務器只需要提供靜態(tài)資源來說废境，服務器負載更大

2. JS事件循環(huán)