04-Vue 可复用技术

1. 混入

混入规则：当组件和混入对象有同名选项时，这些选项会以恰当的方式进行合并。
    (1) 数据data
        数据对象在混入时，会进行合并，发生冲突时，保留组件的数据
    (2) 值为对象methods，computed等
        在混入时，同名的methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对
    (3) 生命周期钩子函数
        同名的钩子函数会被合并为一个数组，依次都会被调用，但是混入对象的钩子函数先被调用。

全局混入
    Vue.mixin(mixin)
局部混入
    let vm = new Vue({
        el:"#app",
        //局部混入
        mixins: [mixin]
    })

2. 自定义指令

指令内部有5个钩子函数
(1) bind(el, binding, vnode, oldVnode){}  //绑定的时候调用一次
(2) inserted(el, binding, vnode, oldVnode){} //当节点追加到父节点上调用
(3) update(el, binding, vnode, oldVnode){} //vnode更新
(4) componentUpdated(el, binding, vnode, oldVnode){} //组件更新调用
(5) unbind(el, binding, vnode, oldVnode){} //解绑的时候调用一次  

每个钩子函数内部都有4个形参
    el 当前指令绑定的dom对象
    binding 当前值绑定指令的详细信息
    vNode Vue编译生成的虚拟dom节点
    oldNode 上一个虚拟dom节点，只有在update和componentUpdated这两个钩子触发时，该参数才有实参。

3. 过滤器

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：
双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道 "|"符号指示。

在双花括号中
    {{ message | filterMethod }}
在v-bind中
    <div :title="new Date() | fmtDate_global">鼠标悬停查看时间
    </div>

首先引入'moment'第三方库，再进行接下来的操作。引入moment仅供实现功能，与过滤器没有关系。
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/af.js">    </script>
<script>
    //全局注册
    Vue.filter("fmtDate_global", function(date){
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
        //或者return自己编写的时间处理函数
    })
</script>

全局注册
    Vue.filter("fmtDate", (val)=>{
        return ...val
    })

局部注册
    filters: {
        fmtDate(val){
            return ...val
        }
    }

4. render函数

render(createElement){
    return createElement(nodeName, props, childVnode)
}

createElement函数内部参数说明
    nodeName: 标签名
    props: 该元素的配置信息
        'class' , style, attrs, props, domProps, On, nativeOn
    childVnode: 子虚拟节点，一般为数组，表示其子元素有多个

5. plugin插件

plugin插件需要提供一个install方法
在vue实例构建之前去调用该插件
保证创建出来的vue实例能够访问插件中的全局方法或属性
Vue.user(MyPlugin)
let vm = new Vue({})