vue

1.1 vue指令

1.1.1 v-text

• 詳情：
  更新元素的 textContent蛋逾。如果要更新部分的 textContent 淆游，需要使用 {{ Mustache }} 插值论熙。

• 用法：

   更新元素的textContent
  <div v-text="tx"></div>
  更新部分的 textContent 
  <div>haha {{tx}}</div>
  

1.1.2 v-html

• 詳情：
  更新元素的 innerHTML 富俄。注意：內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯 。如果試圖使用 v-html 組合模板,可以重新考慮通過是否通過使用組件來替代截歉。

• 胖腾！注意：
  在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的，因?yàn)槿菀讓?dǎo)致 XSS 攻擊。只在可信內(nèi)容上使用 v-html咸作，不能出現(xiàn)在用戶提交的內(nèi)容上锨阿。

• 用法：

  可以解析元素
  <div v-html='tx'></div>
  相當(dāng)于
  <div>{{tx}}</div>
  不可以
  tx:"<input />" 容易被xss攻擊，被覆蓋input提交框,從而獲取用戶內(nèi)容
  

1.1.3 v-if

• 詳情:
  根據(jù)判斷條件判斷元素是否銷毀记罚，顯示墅诡，為false時(shí)沒有DOM節(jié)點(diǎn)
• 用法
  使用以下兩種必須在上一個(gè)兄弟節(jié)點(diǎn)中有v-if
  v-else
  v-else-if

1.1.4 v-show

• 詳情:
  根據(jù)表達(dá)式之真假值，切換元素的 display CSS 屬性毫胜。
  當(dāng)條件變化時(shí)該指令觸發(fā)過渡效果书斜。為false有DOM節(jié)點(diǎn)
• 用法

    <div v-show="Boolean">顯示</div>

1.1.5 v-for

• 預(yù)期：
  Array | Object | number | string | Iterable (2.6 新增)迭代器
• 詳情:
  基于源數(shù)據(jù)多次渲染元素或模板塊
• 用法

    <div v-for="(item,index) in arr" :key='index'>{{index}}=>{{item}}</div>

1.1.6 v-on

• 縮寫 @
• 詳情:
  綁定事件監(jiān)聽器
  用在普通元素上時(shí)，只能監(jiān)聽 原生 DOM 事件酵使。用在自定義元素組件上時(shí)荐吉，也可以監(jiān)聽子組件觸發(fā)的自定義事件
• 用法

    <div v-on:click="btn">點(diǎn)擊彈窗</div>

1.1.7 v-bind

• 縮寫 ：
• 詳情:
  動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，或一個(gè)組件 prop 到表達(dá)式口渔。
  在綁定 class 或 style 特性時(shí)样屠，支持其它類型的值，如數(shù)組或?qū)ο?br> 在綁定 prop 時(shí)缺脉，prop 必須在子組件中聲明痪欲。可以用修飾符指定不同的綁定類型
• 用法

    <div v-bind:style="sty">zz</div>
    <div v-bind:class="className">zz</div>

1.1.8 v-model

• 用法
  在表單控件或者組件上創(chuàng)建雙向綁定
• 限定
  • input
  • select
  • textarea
  • components
• 用法

    <input type="text" v-model="ivalue">
    <div>{{ivalue}}</div>

1.1.9 v-slot

• 縮寫 #
• 限制
  • template
  • 組件 (對(duì)于一個(gè)單獨(dú)的帶 prop 的默認(rèn)插槽)
• 用法
  提供具名插槽或需要接收 prop 的插槽攻礼。
• !單個(gè)插槽
  除非子組件模板包含至少一個(gè) <slot> 插口业踢，否則父組件的內(nèi)容將會(huì)被丟棄。當(dāng)子組件模板只有一個(gè)沒有屬性的插槽時(shí)礁扮，父組件傳入的整個(gè)內(nèi)容片段將插入到插槽所在的 DOM 位置知举，并替換掉插槽標(biāo)簽本身。
  最初在 <slot> 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容太伊。備用內(nèi)容在子組件的作用域內(nèi)編譯雇锡，并且只有在宿主元素為空，且沒有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容僚焦。
• !具名插槽
  <slot> 元素可以用一個(gè)特殊的特性 name 來進(jìn)一步配置如何分發(fā)內(nèi)容锰提。多個(gè)插槽可以有不同的名字。具名插槽將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素芳悲。
  仍然可以有一個(gè)匿名插槽立肘，它是默認(rèn)插槽，作為找不到匹配的內(nèi)容片段的備用插槽名扛。如果沒有默認(rèn)插槽赛不，這些找不到匹配的內(nèi)容片段將被拋棄。
• !作用域插槽 2.1新增
  作用域插槽是一種特殊類型的插槽罢洲，用作一個(gè) (能被傳遞數(shù)據(jù)的) 可重用模板踢故，來代替已經(jīng)渲染好的元素文黎。
  在子組件中，只需將數(shù)據(jù)傳遞到插槽殿较，就像你將 prop 傳遞給組件一樣：

- 匿名插槽(單個(gè)插槽)
    <div id="app">
        <div>我是父</div>
        <v-a>
            <div>顯示</div>
        </v-a>
    </div>
    components:{
           'v-a':{
               template:"<div>我是子組件<slot>只有在沒有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示</slot></div>"
           }
        }
 - 具名插槽
    <div id="app">
        <div>我是父</div>
        <v-a>
            <div>顯示</div>
            <div slot='aa'>aa</div>
            <div slot='bb'>bb</div>
        </v-a>
    </div>
    components:{
           'v-a':{
               template:"<div>我是子組件<slot name='aa'>aa slot</slot> <slot></slot> <slot name='bb'></slot></div>"
           }
        }
- 作用域插槽
     <div id="app">
        <div>我是父</div>
        <v-a>
            <div>顯示</div>
            <template v-slot='pr'>
                <div>{{pr.msg}}</div>
            </template>
        </v-a>
    </div>
    components:{
        'v-a':{
             template:"<div>我是子組件<slot msg='啊哈有'></slot></div>"
        }
    }

1.1.10 v-pre

• v-pre將跳過編譯過程
• 用法
  跳過這個(gè)元素和它的子元素的編譯過程耸峭。可以用來顯示原始 Mustache 標(biāo)簽淋纲。跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯劳闹。

    <div v-pre>不會(huì)編譯{{ivalue}}</div>

1.1.11 v-cloak

• 用法
  這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)洽瞬，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢本涕。

1.1.12 v-once

• 詳細(xì)
  只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過伙窃。這可以用于優(yōu)化更新性能菩颖。

    <div v-once>只更新一次{{ivalue}}</div>

??

ref在那塊使用 在組件掛載之后使用 mounted
對(duì)象的空指針為null 返回為undefined

子組件方法在
self
this.$refs.子組件.方法

1.2 特殊特性

1.2.1 key

• key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes为障。如果不使用 key晦闰，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key鳍怨，它會(huì)基于 key 的變化重新排列元素順序呻右，并且會(huì)移除 key 不存在的元素近顷。
• 有相同父元素的子元素必須有獨(dú)特的 key祟峦。重復(fù)的 key 會(huì)造成渲染錯(cuò)誤。

場(chǎng)景：

• 它也可以用于強(qiáng)制替換元素/組件而不是重復(fù)使用它帐要。當(dāng)你遇到如下場(chǎng)景時(shí)它可能會(huì)很有用：
• 完整地觸發(fā)組件的生命周期鉤子
• 觸發(fā)過渡

   <transition>
 <span :key="text">{{ text }}</span>
   </transition>

當(dāng) text 發(fā)生改變時(shí)侦香，<span> 會(huì)隨時(shí)被更新醒串，因此會(huì)觸發(fā)過渡。

1.2.2 ref

• 在普通的 DOM 元素上使用鄙皇，引用指向的就是 DOM 元素；
• 在子組件上仰挣，引用就指向組件實(shí)例：'

ref的生命周期

• 在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在

    <!-- 子組件在父掛載 -->
    <once ref="once"></once>
    this.$refs.once.方法

    <!-- 在dom中 -->
    <div ref="dom"></div> 
    this.$refs.dom

1.2.3 is ??

用于動(dòng)態(tài)組件且基于 DOM 內(nèi)模板的限制來工作伴逸。

<!-- 當(dāng) `currentView` 改變時(shí)，組件也跟著改變 -->
<component v-bind:is="currentView"></component>

<!-- 這樣做是有必要的膘壶，因?yàn)?`<my-row>` 放在一個(gè) -->
<!-- `<table>` 內(nèi)可能無效且被放置到外面 -->
<table>
 <tr is="my-row"></tr>
</table>

1.3 生命周期

image

1.3.1 beforeCreate

• 詳情
  在實(shí)例初始化之后错蝴，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。

1.3.2 created

• 詳情
  在實(shí)例創(chuàng)建完成后被立即調(diào)用颓芭。在這一步顷锰，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè) (data observer)，屬性和方法的運(yùn)算亡问，watch/event 事件回調(diào)官紫。然而肛宋，掛載階段還沒開始，$el 屬性目前不可見

1.3.3 beforeMount

• 詳情
  在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用束世。
  該鉤子在服務(wù)器端渲染期間不被調(diào)用酝陈。

1.3.4 mounted

• 詳情
  el 被新創(chuàng)建的 vm.el 也在文檔內(nèi)。
• 注意：
  注意 mounted 不會(huì)承諾所有的子組件也都一起被掛載贫堰。如果你希望等到整個(gè)視圖都渲染完畢穆壕，可以用 vm.$nextTick 替換掉 mounted：

      mounted: function () {
      this.$nextTick(function () {
          // Code that will run only after the
          // entire view has been rendered
      })
      }
  

1.3.5 beforeUpdate

• 詳情(當(dāng)data里的數(shù)據(jù)發(fā)生變化是運(yùn)行)
  數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前其屏。這里適合在更新之前訪問現(xiàn)有的 DOM喇勋，比如手動(dòng)移除已添加的事件監(jiān)聽器。

1.3.6 updated

• 詳情
  當(dāng)這個(gè)鉤子被調(diào)用時(shí)漫玄，組件 DOM 已經(jīng)更新茄蚯，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下睦优，你應(yīng)該避免在此期間更改狀態(tài)渗常。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher 取而代之汗盘。
• 注意：
  updated 不會(huì)承諾所有的子組件也都一起被重繪皱碘。如果你希望等到整個(gè)視圖都重繪完畢，可以用 vm.$nextTick 替換掉 updated：

      updated: function () {
          this.$nextTick(function () {
              // Code that will run only after the
              // entire view has been re-rendered
          })
      }
  

1.3.7 beforeDestroy

• 詳情（data發(fā)生改變）
  實(shí)例銷毀之前調(diào)用隐孽。在這一步癌椿，實(shí)例仍然完全可用。

1.3.8 destroyed

• 詳情
  Vue 實(shí)例銷毀后調(diào)用菱阵。調(diào)用后踢俄，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除晴及，所有的子實(shí)例也會(huì)被銷毀都办。

1.4 選項(xiàng) / 數(shù)據(jù)

1.4.1 data

• 詳情
  Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter虑稼，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化琳钉。

1.4.2 props

• 詳情
  props 可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)蛛倦。props 可以是簡(jiǎn)單的數(shù)組歌懒，或者使用對(duì)象作為替代，對(duì)象允許配置高級(jí)選項(xiàng)溯壶，如類型檢測(cè)及皂、自定義驗(yàn)證和設(shè)置默認(rèn)值甫男。
• 限制

  • type: 可以是下列原生構(gòu)造函數(shù)中的一種：String、Number躲庄、Boolean查剖、Array、Object噪窘、Date笋庄、Function、Symbol倔监、任何自定義構(gòu)造函數(shù)直砂、或上述內(nèi)容組成的數(shù)組。會(huì)檢查一個(gè) prop 是否是給定的類型浩习，否則拋出警告静暂。Prop 類型的更多信息在此。

  • default: any
    為該 prop 指定一個(gè)默認(rèn)值谱秽。如果該 prop 沒有被傳入洽蛀，則換做用這個(gè)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(shù)返回疟赊。

  • required: Boolean
    定義該 prop 是否是必填項(xiàng)郊供。在非生產(chǎn)環(huán)境中，如果這個(gè)值為 truthy 且該 prop 沒有被傳入的近哟，則一個(gè)控制臺(tái)警告將會(huì)被拋出驮审。

  • validator: Function
    自定義驗(yàn)證函數(shù)會(huì)將該 prop 的值作為唯一的參數(shù)代入。在非生產(chǎn)環(huán)境下吉执，如果該函數(shù)返回一個(gè) falsy 的值 (也就是驗(yàn)證失敗)疯淫，一個(gè)控制臺(tái)警告將會(huì)被拋出。你可以在這里查閱更多 prop 驗(yàn)證的相關(guān)信息戳玫。

<!-- 父?jìng)髯?-->
<!-- 父組件 -->
    <once :val="value"></one>  
    import Once from './Once'
    data(){
       value1:"父組件要穿給子組件的值", 
    } 
    //掛載
    components:{
        once:Once
    } 
<!-- 子組件 -->
    <div>{{val}}</div> 
    <!-- 1.靜態(tài) -->
    props: ["val"]
    <!-- 2.動(dòng)態(tài) -->
    props:{
        val:{
            限制
        }
    }

1.4.3 computed

• 詳細(xì)
  計(jì)算屬性將被混入到 Vue 實(shí)例中熙掺。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例。
• 注意
  注意如果你為一個(gè)計(jì)算屬性使用了箭頭函數(shù)咕宿，則 this 不會(huì)指向這個(gè)組件的實(shí)例币绩，不過你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來訪問。

      computed: {
          aDouble: vm => vm.a * 2
      }
  

  計(jì)算屬性的結(jié)果會(huì)被緩存荠列，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。注意载城，如果某個(gè)依賴 (比如非響應(yīng)式屬性) 在該實(shí)例范疇之外肌似，則計(jì)算屬性是不會(huì)被更新的。

1.4.5 watch

• 詳情
  一個(gè)對(duì)象诉瓦，鍵是需要觀察的表達(dá)式川队，值是對(duì)應(yīng)回調(diào)函數(shù)力细。值也可以是方法名，或者包含選項(xiàng)的對(duì)象固额。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()眠蚂，遍歷 watch 對(duì)象的每一個(gè)屬性。

    data(){return{a:1}}
    watch:{
        a(val,oldval){}
    }

1.4.6 methods

• 詳情
  methods 將被混入到 Vue 實(shí)例中斗躏∈呕郏可以直接通過 VM 實(shí)例訪問這些方法，或者在指令表達(dá)式中使用啄糙。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例笛臣。

1.5 子傳父組件的通信

$on(event,callback)

• 用法
  監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由vm.emit( eventName, […args] )
• 用法
  觸發(fā)當(dāng)前實(shí)例上的事件燕雁。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)诞丽。

    1.方法一
    // 子組件 Once內(nèi)容
    mounted(){
        this.$emit("shu",參數(shù))
    }

    // 父組件(掛載的子組件)內(nèi)容
    <once v-on:shu="fn"></once> 
    mounted(){
        fn(data){
            console.log(data)
        }
    }

    2.方法二
    // 子組件 Once內(nèi)容
    methods: {
        eleFn(){
            this.$emit("shu",參數(shù))
            this.$on("shu",function(){
                console.log(data)
            })
        }   
    }
    // 父組件(掛載的子組件)內(nèi)容
    <once ref="once"></once>
    mounted(){
        this.$refs.once.eleFn()
    }

1.6 父?jìng)髯?/h3>

    <!-- 父?jìng)髯?-->
<!-- 父組件 -->
    <once :val="value"></one>  
    import Once from './Once'
    data(){
       value1:"父組件要穿給子組件的值", 
    } 
    //掛載
    components:{
        once:Once
    } 
<!-- 子組件 -->
    <div>{{val}}</div> 
    <!-- 1.靜態(tài) -->
    props: ["val"]
    <!-- 2.動(dòng)態(tài) -->
    props:{
        val:{
            限制
        }
    }

1.7 非父子組件

    var app = new Vue({
        el: '#app',
        data: {
           Bus:new Vue({}) 
        },
        components:{
            'v-a':{
                template:"<div><input v-model='v1' /><button @click='btn'>提交</button></div>",
                data(){
                    return{
                        v1:''
                    }
                },
                methods: {
                   btn(){
                       this.$root.Bus.$emit('event1',this.v1)
                   }
                }
               
            },
            'v-b':{
                template:"<div>{{msg}}</div>",
                data(){
                    return{
                        msg:'haha'
                    }
                },
                created(){
                    this.$root.Bus.$on('event1',function(val){
                        console.log(val)
                        this.msg=val //無效果 溜了
                    })
                },
                //解除事件綁定
                beforeDestroy() {
                    this.$root.Bus.$off('event1')
                },
               
            }
        }
    })

2 vueX

2.1什么是vuex

• Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)拐格，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化僧免。
• 狀態(tài)自管理應(yīng)用
  • state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源禁荒；
  • view猬膨，以聲明方式將 state 映射到視圖；
  • actions呛伴，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化勃痴。

image

2.2 Api及使用

image

2.2.1 State

    調(diào)用 
    1.this.$store.state.xx
    2.import { mapState } from 'vuex'
    computed: {
        localComputed () { /* ... */ },
        // 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中
        ...mapState({
            // ...
        })
        }

2.2.2 Getter

    調(diào)用
    1.this.$store.getters.xxFn
    2. import { mapGetters } from 'vuex'
    computed: {
    // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
        ...mapGetters([
        'doneTodosCount',
        'anotherGetter',
        // ...
        ])
    }

2.2.3 Mutation 同步

    在store中
    mutations: {
        increment (state,abs) {
        // 變更狀態(tài)
        state.count++
        }
    }
    調(diào)用
    1.store.commit('increment',10)
    2.import { mapMutations } from 'vuex'
      methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`

      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }

2.2.4 Action 異步

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation热康，而不是直接變更狀態(tài)沛申。
• Action 可以包含任意異步操作。

在store中
    actions: {
        increment ({ commit }) {
            commit('increment')
        }
    }
調(diào)用
1.store.dispatch('increment')
    // 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
  amount: 10
})

// 以對(duì)象形式分發(fā)
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
2.import { mapActions } from 'vuex'
 methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
  }

2.2.5 Module 模塊

• 將store分割成模塊姐军，每個(gè)模塊擁有自己的state铁材，mutation,action,getter,甚至是嵌套子模塊--從上至下進(jìn)行同樣方式的分割：

    // 子模塊
    const mode1={
    namespaced:true, //命名空間，代碼分成
    state:{
        msg:"c1模塊"
    },
    getters:{

    },
    mutations:{
        aaa(state){
            alert(state.msg)
        }
    },
    actions:{

    },
    modules:{
        
    }
}
export default mode1; //

// 在store實(shí)例中
import mode1 from '地址'
modules:{mode1}

// 在組件中調(diào)用
- 1.直接調(diào)用
調(diào)用state里的
this.$store.state.mode1.msg //mode1:子模塊 msg:數(shù)據(jù)
調(diào)用其他
this.$store.state.commit('model1/fn',參數(shù))
this.$store.state.dispatch('model1/fn',參數(shù))
this.$store.getters['mode1/c1Fn']
輔助函數(shù)
...mapMutations({aa:"mode1/aaa"}),
...mapMutations('mode1',['aaa'])

3 函數(shù)抖動(dòng)和函數(shù)節(jié)流

• 函數(shù)抖動(dòng)：
  多個(gè)調(diào)用只執(zhí)行一個(gè)奕锌，其他的不執(zhí)行返回

• 防抖動(dòng)函數(shù)參數(shù)
  1.time或次數(shù)
  2.要執(zhí)行fn
  3.回調(diào)函數(shù)

    function debounce(func, wait) {
    let timer = null;
    return (...args) => {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args)
        }, wait)
    }
}

• 函數(shù)節(jié)流
  多個(gè)調(diào)用著觉，一個(gè)一個(gè)執(zhí)行
• 節(jié)流函數(shù)參數(shù)

    function throttle(func, wait) {
    let timer = null, startTime = new Date()
    return (...args) => {
        let curTime = new Date();
        if (timer) {
            timer = clearTimeout(timer);
        }
        // 達(dá)到規(guī)定觸發(fā)事件間隔，觸發(fā)函數(shù)
        if (curTime - startTime >= wait) {
            func.apply(this, args);
            startTime = curTime;
        } else {
            timer = setTimeout(() => {
                func.apply(this, args)
            }, wait)
        }
    }
}

高階函數(shù)：英文叫Higher-order function惊暴。JavaScript的函數(shù)其實(shí)都指向某個(gè)變量饼丘。既然變量可以指向函數(shù)，函數(shù)的參數(shù)能接收變量辽话，那么一個(gè)函數(shù)就可以接收另一個(gè)函數(shù)作為參數(shù)肄鸽，這種函數(shù)就稱之為高階函數(shù)卫病。

3.1 css重繪和回流（重排）

4 axios

4.1什么是axios?

axios是一個(gè)基于promise的HTTP庫，可以用在瀏覽器和node.js
Features

• 從瀏覽器中創(chuàng)建 XMLHttpRequests
• 從 node.js 創(chuàng)建 http 請(qǐng)求
• 支持 Promise API
• 攔截請(qǐng)求和響應(yīng)
• 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
• 取消請(qǐng)求
• 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
• 客戶端支持防御 XSRF

5 Promise

5.1promise的含義

Promise 是異步編程的一種解決方案,
所謂Promise典徘，簡(jiǎn)單說就是一個(gè)容器蟀苛，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語法上說逮诲，Promise 是一個(gè)對(duì)象帜平，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API汛骂，各種異步操作都可以用同樣的方法進(jìn)行處理罕模。

5.2promise的特點(diǎn)

• 1）對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作帘瞭，有三種狀態(tài)：pending（進(jìn)行中）淑掌、fulfilled（已成功）和rejected（已失敗）蝶念。只有異步操作的結(jié)果抛腕，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)媒殉。這也是Promise這個(gè)名字的由來担敌，它的英語意思就是“承諾”，表示其他手段無法改變

• 2）一旦狀態(tài)改變廷蓉，就不會(huì)再變全封，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變桃犬，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected刹悴。只要這兩種情況發(fā)生，狀態(tài)就凝固了攒暇，不會(huì)再變了土匀，會(huì)一直保持這個(gè)結(jié)果，這時(shí)就稱為 resolved（已定型）形用。如果改變已經(jīng)發(fā)生了就轧，你再對(duì)Promise對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果田度。這與事件（Event）完全不同妒御，事件的特點(diǎn)是，如果你錯(cuò)過了它镇饺，再去監(jiān)聽乎莉，是得不到結(jié)果的。

5.2.1 缺點(diǎn)

• 1.無法取消Promise，一旦新建它就會(huì)立即執(zhí)行梦鉴，無法中途取消
• 2.如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤揭保，不會(huì)反應(yīng)到外部
• 3.當(dāng)處于pending狀態(tài)時(shí)肥橙，無法得知目前進(jìn)展到哪一個(gè)階段（剛剛開始還是即將完成）

0.0 vue面試題

• 在網(wǎng)上找的感覺很具體
  https://segmentfault.com/a/1190000016344599

0.1 對(duì)于MVVM框架的理解

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表數(shù)據(jù)模型秸侣，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯存筏。
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來味榛。
ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為椭坚、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象搏色，連接Model和View善茎。
在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系频轿，而是通過ViewModel進(jìn)行交互垂涯，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中航邢，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上耕赘。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動(dòng)的膳殷，無需人為干涉操骡，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題赚窃，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理册招。

0.2 Vue的生命周期

image

• beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測(cè)和初始化事件還未開始

• created（創(chuàng)建后） 完成數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算考榨，初始化事件跨细，$el屬性還沒有顯示出來

• beforeMount（載入前） 在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用河质。實(shí)例已完成以下的配置：編譯模板冀惭，把data里面的數(shù)據(jù)和模板生成html。注意此時(shí)還沒有掛載html到頁面上掀鹅。

• mounted（載入后） 在el 被新創(chuàng)建的 vm.$el 替換散休，并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對(duì)象乐尊。完成模板中的html渲染到html頁面中戚丸。此過程中進(jìn)行ajax交互。

• beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前限府《岵可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過程胁勺。

• updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用世澜。調(diào)用時(shí)，組件DOM已經(jīng)更新署穗，所以可以執(zhí)行依賴于DOM的操作寥裂。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)案疲，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)封恰。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

• beforeDestroy（銷毀前） 在實(shí)例銷毀之前調(diào)用褐啡。實(shí)例仍然完全可用诺舔。

• destroyed（銷毀后） 在實(shí)例銷毀之后調(diào)用。調(diào)用后备畦，所有的事件監(jiān)聽器會(huì)被移除混萝，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用萍恕。

• 1.什么是vue生命周期逸嘀？
  答： Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期允粤。從開始創(chuàng)建崭倘、初始化數(shù)據(jù)、編譯模板类垫、掛載Dom→渲染司光、更新→渲染、銷毀等一系列過程悉患，稱之為 Vue 的生命周期残家。

• 2.vue生命周期的作用是什么？
  答：它的生命周期中有多個(gè)事件鉤子售躁，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯坞淮。

• 3.vue生命周期總共有幾個(gè)階段？
  答：它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后陪捷。

• 4.第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子回窘？
  答：會(huì)觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在 哪個(gè)周期中就已經(jīng)完成市袖？
答：DOM 渲染在 mounted 中就已經(jīng)完成了啡直。

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

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個(gè)屬性的setter，getter酒觅，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者撮执，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時(shí)舷丹，Vue 將遍歷它的屬性二打，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter掂榔，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時(shí)通知變化症杏。

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

• 1.父組件與子組件傳值
  父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);
  子組件傳給父組件：$emit方法傳遞參數(shù)
• 2.非父子組件間的數(shù)據(jù)傳遞装获，兄弟組件傳值
  eventBus，就是創(chuàng)建一個(gè)事件中心厉颤，相當(dāng)于中轉(zhuǎn)站穴豫，可以用它來傳遞事件和接收事件。項(xiàng)目比較小時(shí)逼友，用這個(gè)比較合適精肃。

0.5 Vue的路由實(shí)現(xiàn)：hash模式 和 history模式

• hash模式(默認(rèn))：在瀏覽器中符號(hào)“#”，#以及#后面的字符稱之為hash帜乞，用window.location.hash讀人颈А；
  特點(diǎn)：hash雖然在URL中黎烈，但不被包括在HTTP請(qǐng)求中习柠；用來指導(dǎo)瀏覽器動(dòng)作，對(duì)服務(wù)端安全無用照棋，hash不會(huì)重加載頁面资溃。
  hash 模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中烈炭，如 http://www.xxx.com溶锭，因此對(duì)于后端來說，即使沒有做到對(duì)路由的全覆蓋符隙，也不會(huì)返回 404 錯(cuò)誤趴捅。

• history模式：history采用HTML5的新特性；且提供了兩個(gè)新方法：pushState（）霹疫，replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改驻售，以及popState事件的監(jiān)聽到狀態(tài)變更。
  history 模式下更米，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致欺栗，如 http://www.xxx.com/items/id。后端如果缺少對(duì) /items/id 的路由處理，將返回 404 錯(cuò)誤迟几。

0.6 Vue與Angular以及React的區(qū)別消请？

1.與AngularJS的區(qū)別

• 相同點(diǎn)：
  都支持指令：內(nèi)置指令和自定義指令；都支持過濾器：內(nèi)置過濾器和自定義過濾器类腮；都支持雙向數(shù)據(jù)綁定臊泰；都不支持低端瀏覽器。

• 不同點(diǎn)：
  AngularJS的學(xué)習(xí)成本高蚜枢，比如增加了Dependency Injection特性缸逃，而Vue.js本身提供的API都比較簡(jiǎn)單、直觀厂抽；在性能上需频，AngularJS依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢筷凤；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新昭殉，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。

2.與React的區(qū)別

• 相同點(diǎn)：
  React采用特殊的JSX語法藐守，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式挪丢，對(duì)文件內(nèi)容都有一些約定，兩者都需要編譯后使用卢厂；中心思想相同：一切都是組件乾蓬，組件實(shí)例之間可以嵌套；都提供合理的鉤子函數(shù)慎恒，可以讓開發(fā)者定制化地去處理需求巢块；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包巧号，而是以插件的方式加載族奢；在組件開發(fā)中都支持mixins的特性敦姻。
• 不同點(diǎn)：
  React采用的Virtual DOM會(huì)對(duì)渲染出來的結(jié)果做臟檢查纠拔；Vue.js在模板中提供了指令，過濾器等催享，可以非常方便靠欢，快捷地操作Virtual DOM廊敌。

0.7 vue路由的鉤子函數(shù)

首頁可以控制導(dǎo)航跳轉(zhuǎn)，beforeEach门怪，afterEach等骡澈，一般用于頁面title的修改。一些需要登錄才能調(diào)整頁面的重定向功能掷空。

beforeEach主要有3個(gè)參數(shù)to肋殴，from囤锉，next：

to：route即將進(jìn)入的目標(biāo)路由對(duì)象，

from：route當(dāng)前導(dǎo)航正要離開的路由

next：function一定要調(diào)用該方法resolve這個(gè)鉤子护锤。執(zhí)行效果依賴next方法的調(diào)用參數(shù)官地。可以控制網(wǎng)頁的跳轉(zhuǎn)烙懦。

0.8 vuex是什么驱入？怎么使用？哪種功能場(chǎng)景使用它氯析？

• vuex
  只用來讀取的狀態(tài)集中放在store中亏较； 改變狀態(tài)的方式是提交mutations，這是個(gè)同步的事物掩缓； 異步邏輯應(yīng)該封裝在action中雪情。

• 使用
  在main.js引入store，注入拾因。新建了一個(gè)目錄store，….. export 旷余。

• 場(chǎng)景有：
  單頁應(yīng)用中绢记，組件之間的狀態(tài)、音樂播放正卧、登錄狀態(tài)蠢熄、加入購物車

• vuex關(guān)系圖
  [圖片上傳失敗...(image-cafbb4-1566737458596)]

state
Vuex 使用單一狀態(tài)樹,即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例，但單一狀態(tài)樹和模塊化并不沖突炉旷。存放的數(shù)據(jù)狀態(tài)签孔，不可以直接修改里面的數(shù)據(jù)。
mutations
mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)窘行。
getters
類似vue的計(jì)算屬性饥追，主要用來過濾一些數(shù)據(jù)。
action
actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法罐盔，簡(jiǎn)單的說就是異步操作數(shù)據(jù)但绕。view 層通過 store.dispath 來分發(fā) action。

const store = new Vuex.Store({ //store實(shí)例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
項(xiàng)目特別復(fù)雜的時(shí)候惶看，可以讓每一個(gè)模塊擁有自己的state捏顺、mutation、action纬黎、getters,使得結(jié)構(gòu)非常清晰幅骄，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

0.9 vue-cli如何新增自定義指令本今？

• 1.創(chuàng)建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 創(chuàng)建指令(可以多個(gè))
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對(duì)DOM進(jìn)行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

• 2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

• 3組件的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

vue如何自定義一個(gè)過濾器拆座？

    <div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
    </div>

    var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定義過濾器:

    Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
    })

拓展 簡(jiǎn)單面試題

1.css只在當(dāng)前組件起作用
答：在style標(biāo)簽中寫入scoped即可 例如：<style scoped></style>

2.v-if 和 v-show 區(qū)別
答：v-if按照條件是否渲染主巍，v-show是display的block或none；

3.router的區(qū)別
答：router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等脸甘。

4.vue.js的兩個(gè)核心是什么恳啥？
答：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)

5.vue幾種常用的指令
答：v-for 丹诀、 v-if 钝的、v-bind、v-on铆遭、v-show硝桩、v-else

6.vue常用的修飾符？
答：.prevent: 提交事件不再重載頁面枚荣；.stop: 阻止單擊事件冒泡碗脊；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)；.capture: 事件偵聽橄妆，事件發(fā)生的時(shí)候會(huì)調(diào)用

7.v-on 可以綁定多個(gè)方法嗎衙伶？
答：可以

8.vue中 key 值的作用？
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)害碾，它默認(rèn)用“就地復(fù)用”策略矢劲。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序慌随， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素卧须，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。key的作用主要是為了高效的更新虛擬DOM儒陨。

9.什么是vue的計(jì)算屬性花嘶？
答：在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理蹦漠，且可能多次使用的情況下椭员，盡量采取計(jì)算屬性的方式。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰笛园；②依賴于數(shù)據(jù)隘击，數(shù)據(jù)更新侍芝，處理結(jié)果自動(dòng)更新；③計(jì)算屬性內(nèi)部this指向vm實(shí)例埋同；④在template調(diào)用時(shí)州叠，直接寫計(jì)算屬性名即可；⑤常用的是getter方法凶赁，獲取數(shù)據(jù)咧栗，也可以使用set方法改變數(shù)據(jù)；⑥相較于methods虱肄，不管依賴的數(shù)據(jù)變不變致板，methods都會(huì)重新計(jì)算，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取咏窿，不會(huì)重新計(jì)算斟或。

10.vue等單頁面應(yīng)用及其優(yōu)缺點(diǎn)
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)集嵌。MVVM萝挤、數(shù)據(jù)驅(qū)動(dòng)、組件化根欧、輕量怜珍、簡(jiǎn)潔、高效咽块、快速绘面、模塊友好欺税。
缺點(diǎn)：不支持低版本的瀏覽器侈沪，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO晚凿，建議通過服務(wù)端來進(jìn)行渲染組件）亭罪；第一次加載首頁耗時(shí)相對(duì)長(zhǎng)一些；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)歼秽、后退应役。
11.vue 項(xiàng)目獲取數(shù)據(jù)(用axios 發(fā)送ajax請(qǐng)求獲取數(shù)據(jù)) 是要在created中比較好還是在mounted中
答：created

測(cè)試（白盒和黑盒）

• 白盒測(cè)試主要針對(duì)的是程序代碼邏輯，黑盒測(cè)試主要針對(duì)的是程序所展現(xiàn)給用戶的功能燥筷，簡(jiǎn)單的說就是前者測(cè)試后臺(tái)程序后者測(cè)試前臺(tái)展示功能箩祥。