Vue 2.x 文檔閱讀筆記三 (可複用性)

混入 mixin

**混入(mixin)**可用來分發組件中的複用功能。一個混入對象可以包含任意組件選項。

當組件使用混入對象時，所有混入對象的選項將被"混合"進行該組件本身的選項中。這個"混合"操作會遵循以下幾條規則：

1. data數據對象在內部會進行遞歸合併，並在發生衝突時以組件數據爲優化。
2. 同名鉤子函數將合併爲一個數組，因此都將被調用。但是混入對象的鉤子將在組件自身鉤子之前調用。
3. 值爲對象的選項，例如methods、components、directives，將被合併爲同一個對象。如果兩個對象的鍵名衝突，則取組件對象的鍵值對。
4. Vue.extend() 也使用同樣的策略進行合併。
5. 示例代碼請點擊這裏參考。

自定義指令

vue除了有默認內置指令如v-model和v-show等之外，還支持開發者註冊自定義指令。

①.自定義指令註冊

可以註冊全局自定義指令和局部自定義指令。以下示例以自動聚焦輸入框爲例。

註冊全局自定義指令：

// 註冊一個全局自定義指令 v-focus
Vue.directives( "focus", {
    inserted: function( el ){
        // 聚焦元素
        el.focus();
    }
} )

註冊局部自定義指令：

export default {
    data(){ return {} }
    // 在directives選項中
    directives: {
        focus: {
            // 指令的定義
            inserted: function( el ){
                el.focus();
            }
        }
    }
}

②.自定義指令註冊時的鉤子函數

一個自定義指令對象在註冊時可以使用以下幾個可選的鉤子函數：

1. bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。
2. inserted: 當被綁定的元素插入到 DOM 中時調用
3. update：所在組件的虛擬節點(VNode)更新時調用，但是可能發生在其子虛擬節點更新之前。
4. componentUpdated：指令所在組件的虛擬節點及其子虛擬節點全部更新後調用。
5. unbind：只調用一次，指令與元素解綁時調用。

③.鉤子函數參數

自定義指令鉤子函數會被傳入這些參數：

• el，指令所綁定的元素，可以用來直接操作 DOM
• binding，包含一些屬性的對象，屬性有指令名、指令綁定值等，具體可以自己打印看下或者點擊這裏查看官方文檔
• vnode，Vue編譯生成的虛擬節點
• oldVnode，指上一個虛擬節點，僅在update和componentUpdated鉤子中可用。

注意除了參數el外，其他參數應都只是只讀，不要修改。如需在鉤子之間共享數據，應通過元素的dataset來進行。

如果指令需要多個值，可以傳入一個js對象字面量，如<div v-demo="{color: 'red', text: 'hello'}"></div>。

渲染函數 & JSX

點擊這裏查看官方文檔。

使用插件與開發插件

點擊這裏查看官方文檔。

過濾器

vue中可以自定義過濾器，常被用於一些常見的文本格式化。

①.定義過濾器

1. 在一個組件的選項中定義本地過濾器

<template>
    <div class="wrap">
        <div>
            <p><input type="text" v-model="text"></p>
            首字母大寫過濾後的值：<span>{{text | capitalize}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            text: ''
        }
    },
    filters: {
        capitalize( value ){
            if( !value ) return ''
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
}
</script>

2. 在創建Vue實例之前全局定義過濾器

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

new Vue({
    // ...
})

②.過濾器的應用

過濾器可以被應用在兩種地方：雙花括號插值、v-bind表達式。其中過濾器應被添加在js表達式尾部，由"管道"符號表示：

// 在雙花括號插值中，capitalize是過濾器
{{ msg | capitalize }}

// 在v-bind中，formatId是過濾器
<div v-bind:id="rawId | formatId"></div>

過濾器函數總是接收表達式的值作爲第一個參數。

過濾器函數還可以串聯應用：{{ msg | filterA | filterB }}，這裏值msg作爲參數被傳遞給過濾器函數filterA，然後再將filterA的結果傳遞到過濾器函數filterB中。

過濾器函數還可以接收別的參數：{{ msg | filterA('arg1', arg2) }}，filterA 被定義爲接收三個參數的過濾器函數。其中 msg 的值作爲第一個參數，普通字符串 ‘arg1’ 作爲第二個參數，表達式 arg2 的值作爲第三個參數。

喜歡本文請掃下方二維碼，關注微信公衆號： 前端小二，查看更多我寫的文章哦，多謝支持。