关于前端:04Vue-可复用技术

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