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>

1. 在创建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 的值作为第三个参数。

参考资料：

1. vue官方文档