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 組合模板,可以重新考慮通過(guò)是否通過(guò)使用組件來(lái)替代。

• ！注意：
  在網(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í)沒(méi)有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ā)過(guò)渡效果。為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)聽(tīng)器
  用在普通元素上時(shí)，只能監(jiān)聽(tīng) 原生 DOM 事件。用在自定義元素組件上時(shí)，也可以監(jiān)聽(tīng)子組件觸發(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 必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋?/li>
• 用法

    <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è)沒(méi)有屬性的插槽時(shí)，父組件傳入的整個(gè)內(nèi)容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標(biāo)簽本身。
  最初在 <slot> 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒(méi)有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容。
• !具名插槽
  <slot> 元素可以用一個(gè)特殊的特性 name 來(lái)進(jìn)一步配置如何分發(fā)內(nèi)容。多個(gè)插槽可以有不同的名字。具名插槽將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素。
  仍然可以有一個(gè)匿名插槽，它是默認(rèn)插槽，作為找不到匹配的內(nèi)容片段的備用插槽。如果沒(méi)有默認(rèn)插槽，這些找不到匹配的內(nèi)容片段將被拋棄。
• !作用域插槽 2.1新增
  作用域插槽是一種特殊類型的插槽，用作一個(gè) (能被傳遞數(shù)據(jù)的) 可重用模板，來(lái)代替已經(jīng)渲染好的元素。
  在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像你將 prop 傳遞給組件一樣：

- 匿名插槽(單個(gè)插槽)
    <div id="app">
        <div>我是父</div>
        <v-a>
            <div>顯示</div>
        </v-a>
    </div>
    components:{
           'v-a':{
               template:"<div>我是子組件<slot>只有在沒(méi)有要分發(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將跳過(guò)編譯過(guò)程
• 用法
  跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。可以用來(lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(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)容并跳過(guò)。這可以用于優(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ā)過(guò)渡

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

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

1.2.2 ref

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

ref的生命周期

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

    <!-- 子組件在父掛載 -->
    <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)模板的限制來(lái)工作。

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

<!-- 這樣做是有必要的，因?yàn)?`<my-row>` 放在一個(gè) -->
<!-- `<table>` 內(nèi)可能無(wú)效且被放置到外面 -->
<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)。然而，掛載階段還沒(méi)開(kāi)始，$el 屬性目前不可見(jiàn)

1.3.3 beforeMount

• 詳情
  在掛載開(kāi)始之前被調(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ǔ)丁之前。這里適合在更新之前訪問(wèn)現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽(tīng)器。

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)聽(tīng)器會(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ū)ο螅糜诮邮諄?lái)自父組件的數(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 沒(méi)有被傳入，則換做用這個(gè)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(shù)返回。

  • required: Boolean
    定義該 prop 是否是必填項(xiàng)。在非生產(chǎn)環(huán)境中，如果這個(gè)值為 truthy 且該 prop 沒(méi)有被傳入的，則一個(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í)例，不過(guò)你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來(lái)訪問(wèn)。

      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í)例中?？梢灾苯油ㄟ^(guò) VM 實(shí)例訪問(wèn)這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。

1.5 子傳父組件的通信

$on(event,callback)

• 用法
  監(jiān)聽(tīng)當(dāng)前實(shí)例上的自定義事件。事件可以由vm.emit( eventName, […args] )
• 用法
  觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(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 //無(wú)效果 溜了
                    })
                },
                //解除事件綁定
                beforeDestroy() {
                    this.$root.Bus.$off('event1')
                },
               
            }
        }
    })

2 vueX

2.1什么是vuex

• Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(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ì)象展開(kāi)運(yùn)算符將此對(duì)象混入到外部對(duì)象中
        ...mapState({
            // ...
        })
        }

2.2.2 Getter

    調(diào)用
    1.this.$store.getters.xxFn
    2. import { mapGetters } from 'vuex'
    computed: {
    // 使用對(duì)象展開(kāi)運(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庫(kù)，可以用在瀏覽器和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)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，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)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來(lái)，它的英語(yǔ)意思就是“承諾”，表示其他手段無(wú)法改變

• 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ò)過(guò)了它，再去監(jiān)聽(tīng)，是得不到結(jié)果的。

5.2.1 缺點(diǎn)

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

0.0 vue面試題

• 在網(wǎng)上找的感覺(jué)很具體
  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)出來(lái)。
ViewModel 監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象，連接Model和View。
在MVVM架構(gòu)下，View 和 Model 之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
ViewModel 通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。

0.2 Vue的生命周期

image

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

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

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

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

• beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。

• 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)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

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

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

• 1.什么是vue生命周期？
  答： Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過(guò)程，稱之為 Vue 的生命周期。

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

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

• 4.第一次頁(yè)面加載會(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ā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)時(shí)，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。

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

• 1.父組件與子組件傳值
  父組件傳給子組件：子組件通過(guò)props方法接受數(shù)據(jù);
  子組件傳給父組件：$emit方法傳遞參數(shù)
• 2.非父子組件間的數(shù)據(jù)傳遞，兄弟組件傳值
  eventBus，就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件。項(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)求中；用來(lái)指導(dǎo)瀏覽器動(dòng)作，對(duì)服務(wù)端安全無(wú)用，hash不會(huì)重加載頁(yè)面。
  hash 模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 http://www.xxx.com，因此對(duì)于后端來(lái)說(shuō)，即使沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤。

• history模式：history采用HTML5的新特性；且提供了兩個(gè)新方法：pushState（），replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽(tīng)到狀態(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)置指令和自定義指令；都支持過(guò)濾器：內(nèi)置過(guò)濾器和自定義過(guò)濾器；都支持雙向數(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語(yǔ)法，Vue.js在組件開(kāi)發(fā)中也推崇編寫.vue特殊文件格式，對(duì)文件內(nèi)容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實(shí)例之間可以嵌套；都提供合理的鉤子函數(shù)，可以讓開(kāi)發(fā)者定制化地去處理需求；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開(kāi)發(fā)中都支持mixins的特性。
• 不同點(diǎn)：
  React采用的Virtual DOM會(huì)對(duì)渲染出來(lái)的結(jié)果做臟檢查；Vue.js在模板中提供了指令，過(guò)濾器等，可以非常方便，快捷地操作Virtual DOM。

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

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

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

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

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

next：function一定要調(diào)用該方法resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)?？梢钥刂凭W(wǎng)頁(yè)的跳轉(zhuǎn)。

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

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

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

• 場(chǎng)景有：
  單頁(yè)應(yīng)用中，組件之間的狀態(tài)、音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車

• 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ì)算屬性，主要用來(lái)過(guò)濾一些數(shù)據(jù)。
action
actions可以理解為通過(guò)將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)。view 層通過(guò) store.dispath 來(lái)分發(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è)過(guò)濾器？

    <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)
      }
    }
})

全局定義過(guò)濾器:

    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: 提交事件不再重載頁(yè)面；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)；.capture: 事件偵聽(tīng)，事件發(fā)生的時(shí)候會(huì)調(diào)用

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

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

9.什么是vue的計(jì)算屬性？
答：在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(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è)面應(yīng)用及其優(yōu)缺點(diǎn)
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過(guò)盡可能簡(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，建議通過(guò)服務(wù)端來(lái)進(jìn)行渲染組件）；第一次加載首頁(yè)耗時(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)單的說(shuō)就是前者測(cè)試后臺(tái)程序后者測(cè)試前臺(tái)展示功能。