Vue經常使用知識點總結

時間 2019-11-29

標籤 vue 經常使用知識總結简体版

原文原文鏈接

平時在項目開發過程當中會用到一些知識點，本身以爲有些用，便整理下來供之後本身去回顧。javascript

一、混入（mixins）

混入 (mixins) 是一種分發 Vue 組件中可複用功能的很是靈活的方式。混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被混入該組件自己的選項。html

例子：定義一個混入前端

var myMixin = {
        data: function () {
            return {
              message: 'hello',
              foo: 'abc'
            }
        },
        created: function () {
            this.hello()
         },
        methods: {
            hello: function () {
              console.log('hello from mixin!')
            },
            getName:function(name){
                console.log("我在迷信中名字是："+name);
            },
            getAge:function(age){
                console.log("我今年"+age+"歲了")
            }
        }
    }  
    //在vue中進行使用
    var vm=new Vue({
      mixins: [myMixin],
      data: function () {
        return {
          message: 'goodbye',
          bar: 'def'
        }
      },
      created: function () {
        console.log("created:"+JSON.stringify(this.$data))
      },
      methods:{
          getName:function(name){
              console.log("我在vue中的名字爲:"+name);
          }
      }
    })
複製代碼

同名鉤子函數將混合爲一個數組，所以都將被調用。另外，混合對象的鉤子將在組件自身鉤子以前調用。於是在鉤子函數created()中的輸出爲：vue

'created:hello from mixin!'   第一行；    
    'created:{ "message": "goodbye", "foo": "abc", "bar": "def" }'  第二行；    
複製代碼

在值爲對象的這些Vue屬性中，例如 methods, components 和 directives，將被混合爲同一個對象。當mixin對象和Vue實例兩個對象中鍵名衝突時，取Vue實例對象的鍵值對。 所以在調用methods中的方法時。會將Vue實例中沒有的，mixin中有的添加到Vue實例中去。java

vm.getName("黎明")；//我在vue中的名字爲：黎明。  
    vm.getAge(20);//我今年20歲了。
複製代碼

mixin有點跟jQuery中的$.extend()和es6的object.assign()方法在功能上有些類似。es6

二、Vue.nextTick()

在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。
在項目開發過程當中遇到dom元素被隱藏或顯示等都沒元素狀態發生改變時，最好是使用nextTick()方法，否則可能不能正常獲取dom元素的屬性信息。vuex

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    isShow:false
  },
  methods: {
    changeState() {
      this.isShow = !this.isShow;
      this.$nextTick(() => {
        //this.isShow改變後,致使dom樹被更新後要執行的代碼
      })
    }
  }
})
複製代碼

三、Vue.set( target, key, value )

target：要更改的數據源(能夠是對象或者數組)
key：要更改的具體數據
value ：從新賦的值
設計模式

向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，由於 Vue 沒法探測普通的新增屬性 。數組

好比 this.myObject.newProperty = 'hi'
複製代碼

例子以下：緩存

<div id="app">
    <input v-model="arr[0].name" />
	<ul>
		<li v-for="(item,index) in arr" :key="index">
			{{index}}——{{item.name}}
		</li>
	</ul>
	<button @click="changeArr">使用傳統js方法修改數組</button>
	<button@click="changeArrBySet">使用Vue.set方法修改數組</button>
</div>
<script type="text/javascript">
	window.onload=function(){
		new Vue({
			el:"#app",
			data:{
				arr:[{name:"張三",age:20},{name:"李四",age:26},{name:"王五",age:20}]
			},
			methods:{
				changeArr(){
				    this.arr[0]={name:"張大",age:40};
				    console.log("使用傳統js方法修改數組");
				},
				changeArrBySet(){
				    this.$set(this.arr,0,{name:"張大",age:40});
				    console.log("使用傳統js方法修改數組");
				}
			}
		})
	}
</script>
複製代碼

點擊事件操做結果以下所示：

從上面的輸出結果咱們能夠看出，咱們調用使用this.arr[0]={name:"張大",age:40};來修改數據元素時並無改變視圖中的元素。而咱們經過使用this.$set(this.arr,0,{name:"張大",age:40});可以實時修改視圖元素。

總結：經過數組的變異方法（Vue數組變異方法）咱們能夠動態控制數據的增減，可是咱們卻沒法作到對某一條數據的修改，修改數據咱們可使用Vue.set()方法。

四、Vue.extend()

使用基礎 Vue 構造器，建立一個「子類」。參數是一個包含組件選項的對象。data 選項是特例，須要注意 - 在 Vue.extend() 中它必須是函數。
這裏就我我的理解其實就是在定義組件，支持咱們在框架中是直接定義.vue文件。使用這種狀況比較多的是在頁面中單獨引入vue.js文件，而後在頁面中定義組件用的。在框架中開發中這種全局方法用的比較少。
例子：

<div id="app">
        <todo :todo-data="dataList"></todo>
    </div>
    // 構建一個子組件
    var todoItem = Vue.extend({
        template: ` <li> {{ text }} </li> `,
        props: {
            text: {
                type: String,
                default: ''
            }
        }
    })
    // 構建一個父組件
    var todoWarp = Vue.extend({
        template: `
            <ul>
                <todo-item 
                    v-for="(item, index) in todoData"
                    v-text="item.text"
                ></todo-item>
            </ul>
        `,
        props: {
          todoData: {
              type: Array,
              default: []
          }
        },
        // 局部註冊子組件
        components: {
            todoItem: todoItem
        }
    })
    // 註冊到全局
    Vue.component('todo', todoWarp)；
    
    new Vue({
    el: '#app',
    data: {
        dataList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '隨便其它什麼人吃的東西' }
        ]
    }}) 
複製代碼

經過Vue.extend()方法構造的組件必須經過 Vue.component('todo', todoWarp)註冊到全局，才能夠在頁面中使用該組件。也能夠在組件構造器中 components: { todoItem: todoItem }來將經過Vue.extend()構造的組件進行局部註冊，做爲其餘組件的子組件。

Vue.extend()返回的是一個構造函數，所以還能夠這樣使用。

<div id="mount-point"></div>
    // 建立構造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // 建立 Profile 實例，並掛載到一個元素上。
    new Profile().$mount('#mount-point')
    
    <div id="mount-point"></div>將會被渲染成<p>Walter White aka Heisenberg</p>
複製代碼

五、delimiters

delimiters的做用是改變咱們插值的符號。Vue默認的插值是雙大括號{{}}。但有時咱們會有需求更改這個插值的形式。

delimiters:['${','}']
複製代碼

如今咱們的插值形式就變成了${}。代替了{{ }}。

六、BEM設計模式

BEM是(Block Element Modifier)的簡稱,翻譯爲塊級元素修飾符。是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其餘開發者來講更加透明並且更有意義。BEM命名約定更加嚴格，並且包含更多的信息，它們用於一個團隊開發一個耗時的大項目。

B: 表示塊，能夠抽象成一個組件
E: 表示元素，組件下的一個元素，多個元素造成一個組件
M:表示修飾符，能夠用來表示元素的狀態，好比激活狀態，顏色，大小

__主要用來表示塊(B)和元素(E)間的鏈接。
--用來表示塊或者元素與狀態的鏈接。

常見樣式設置格式

.button{} // 塊
.button__text{} //元素
.button--primary{}//修飾符

假若有以下代碼，其class名稱以下所示

<div class="button button--primary">
       <span class="button__text">藍色按鈕</span>
    </div>
    <div class="button button--success">
        <span class="button__text">綠色按鈕</span>
    </div>
    <div class="button button--warning">
        <span class="button__text">紅色按鈕</span>
    </div>    
複製代碼

七、組價間通訊的幾種方式

一、props

這是父子間組件通訊的常見方式，通常用於父組件向子組件傳遞數據，而且是響應式的。通常狀況下子組件不會去直接改變從父組件同過prop傳過來的數據，通常會在子組件data中定義一個變量來進行接收：
注意：這種通訊方式是響應式的，通常狀況下是用於單項通訊的（父向子傳遞數據），可是若是在經過prop特性傳的是一個引用類型的數據（如Object和Array）時，在子組件修改該引用類型的數據時，也會改變父組件中該prop的值。

props:{
        name:{
            type:String,
            dafault:""
        },
        age:{
            type:Number,
            dafault:0
        }
        
    }
    data(){
        return{
            perName=this.name
        }
    }
複製代碼

二、 $emit和$on

這種通訊方式主要是解決子組件向父組件傳遞數據的問題。

//子組件中
    <button @click="send"></button>
    ...
    methods:{
        send(){
            this.$emit("sendMsg","我是子組件的數據")
        }
    }
    
    //父組件中
    ...
    created(){
        this.$on("sendMsg",data=>{
            console.log(data);//"我是子組件的數據"
        })
    }
複製代碼

三、vuex

這種通訊方式屬於全局通訊方式，通常vuex用在中大型項目中。主要是有如下幾個核心概念：

一、state: 用於保存整個項目中用到的全局變量,是響應式的。與之對應的是mapState函數（當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們可使用 mapState 輔助函數幫助咱們生成計算屬性）具體的用法能夠參考官方文檔。 (Vuex)[vuex.vuejs.org/zh/guide/st…]
二、getters： 能夠認爲是 store 的計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。 mapGetters： mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：
三、Mutation： 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。
注意： 一、Mutation 必須是同步函數；二、使用常量替代 Mutation 事件類型；三、Mutation 需遵照 Vue 的響應規則。

mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。
四、Action： Action 提交的是 mutation，而不是直接變動狀態。 Action 能夠包含任意異步操做。Action 經過 store.dispatch 方法觸發。在組件中分發 Action：this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用（須要先在根節點注入 store）。
五、Module Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割。

四、$attrs和$listeners

attrs: 包含了父做用域中不被 prop 所識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含全部父做用域的綁定 (class 和 style 除外)，而且能夠經過 v-bind="$attrs" 傳入內部組件。一般配合 inheritAttrs 選項一塊兒使用。 inheritAttrs爲true時，表示在該組件上顯示哪些非prop屬性，爲false則不顯示。

listeners： 包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件。

五、provide和inject

provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。子孫組件經過inject注入獲取到祖級和父級provide的數據。

注意：provide 和 inject 綁定並非可響應的。這是刻意爲之的。然而，若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的。

provide與inject 實現數據響應式的兩種方式：

一、provide祖先組件的實例，而後在子孫組件中注入依賴，這樣就能夠在子孫組件中直接修改祖先組件的實例的屬性，不過這種方法有個缺點就是這個實例上掛載不少沒有必要的東西好比props，methods 二、使用2.6最新API Vue.observable 優化響應式 provide(推薦)

六、$parent / $children與 ref

ref：若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例。
parent / children：訪問父 / 子實例

這兩種都是直接獲得組件實例，使用後能夠直接調用組件的方法或訪問數據。這兩種方法的弊端是，沒法在跨級或兄弟間通訊。

七、eventBus

這種通訊方式能夠跨組件通信，常常用於兄弟組件間通信。這種通信方式的實現是經過新建一個vue實例，而後在須要通訊的組件間引入，經過emit方法觸發事件，經過on來監聽相應事件來實現通信的功能。

更詳細的請參考大神的介紹——(vue組件間通訊六種方式)juejin.im/post/5cde0b…

八、當即觸發watch的方法

watch:{
    "type":function(){
        handler(){
            //注意這裏不要使用箭頭函數，不然取不到vue實例
            console.log(this.msg);
        },
        immediate:true
        
    }
}
複製代碼

九、computed和methods及watch的對比

一、computed

一、computed是計算屬性,也就是計算值,它更多用於計算值的場景
二、computed具備緩存性,computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變以後，下一次獲取computed的值時纔會從新調用對應的getter來計算
三、computed適用於計算比較消耗性能的計算場景

watch

一、更多的是「觀察」的做用,相似於某些數據的監聽回調,用於觀察props $emit或者本組件的值,當數據變化時來執行回調進行後續操做。
二、無緩存性，頁面從新渲染時值不變化也會執行

小結: 當咱們要進行數值計算,並且依賴於其餘數據，那麼把這個數據設計爲computed 若是你須要在某個數據變化時作一些事情，使用watch來觀察這個數據變化。

十、require.context()的用法

require.context(directory,useSubdirectories,regExp)
    directory:
複製代碼

十一、@click.native的native的做用

假如不加.native的話，會被認爲是該自定義組件中調用了this.$emit("click")。

//el-button.vue
    <template>
        <button @click="btnClick">點擊</button>
    </template>
    <script>
        export default {
          name: 'button',
          methods: {
            @emit("btnClick")
            btnClick () {
              return "emit" // 觸發 `vclick` 事件
            }
          }
    </script>
    //調用el-button組件
    <el-button @btnClick="emitClickhandler" @click.native="clickHandler"></el-button>
    <script>
        export default {
          name: 'button',
          methods: {
            emitClickhandler () {
              console.log("自組件觸發的click事件") // 觸發 `vclick` 事件,此時自觸發該事件
            },
            clickHandler(){
               console.log("組件本身的click事件") // 觸發 `vclick` 事件,當給@click添加.native屬性時，纔會觸發此事件
            }
          }
    </script>
}
複製代碼