关于vue.js:vue可复用性

混入 mixin

罕用场景

有两个类似的组件, 他们基本功能是一样的, 然而他们之前又存在差别, 失常思维是: 是把它拆成两个不同的组件呢, 还是保留为一个组件, 应用 props 传值来发明差别从而进行辨别
两个计划都不完满: 如果拆分成两个组件, 你就不得不冒着一旦性能变动就要在两个文件中更新代码的危险,
如果通过 props 传值很快会变得凌乱, 从而迫使维护者在应用组件的时候必须了解一大段的上下文, 拖慢写代码速度

应用 mixin, vue 中的 mixin 对编写函数式格调的代码很有用, 因为函数式编程就是通过缩小挪动的局部让代码更好了解. mixin 容许你封装一块在利用的其余组件都能够应用的函数, 如果应用切当, 他们不会扭转函数作用域内部的任何货色.

根底实例

咱们有一对不同的组件, 他们的作用是通过切换状态来展现或者暗藏模态框或者提示框, 这些提示框和模态框除了性能类似以外, 没有其余共同点. 他们看起来不一样, 用法不一样, 然而逻辑一样~~~~

// 模态框
      const Modal = {
        template: '#modal',
        data() {
          return {isShowing: false}
        },
        methods: {toggleShow() {this.isShowing = !this.isShowing;}
        },
        components: {appChild: Child}
      }

      // 提示框
      const Tooltip = {
        template: '#tooltip',
        data() {
          return {isShowing: false}
        },
        methods: {toggleShow() {this.isShowing = !this.isShowing;}
        },
        components: {appChild: Child}
      }

咱们能够在这里提取逻辑并创立能够被重用的项

 const toggle = {data() {
           return {isShowing: false}
         },
         methods: {toggleShow() {this.isShowing = !this.isShowing;}
         }
       }

       const Modal = {
         template: '#modal',
         mixins: [toggle],
         components: {appChild: Child}
       };

       const Tooltip = {
         template: '#tooltip',
         mixins: [toggle],
         components: {appChild: Child}
       };

用法

1. 能够在我的项目里新建一个 mixin 目录, 创立一个 js 文件, 在文件里须要输入一个对象

1. 在 modal.vue 文件中引入这个 mixin

<template>
    <div>
        <p v-show="isShowing"> 模态框显示 </p>
        <div @click="toggleShow"> 点击显示暗藏 </div>
    </div>

</template>
<script>
import {toggle} from './mixins/toggle'
export default {
    name: 'modal',
    data() {return {}
    },
    mixins: [toggle]
}

</script>

选项合并

当组件和混入对象有同名选项时, 这个选项会以失当的形式进行合并

1. 数据对象会在外部进行递归合并, 发生冲突会以组件为先
2. 同名的钩子函数会合并为一个数组, 将都被调用. 混入对象的钩子将在组件钩子前调用
3. 值为对象的选项, 比方 methods components 和 directives, 将会合并为一个对象, 当对象键值对抵触时, 将会以组件为主

自定义组件

简介

vue 容许自定义组件. 有些状况下, 也须要对原生 dom 进行操作. 这时候就须要应用自定义组件
例子: 输入框, 默认聚焦

<input v-focus />
directives: {   
    focus: {inserted: function (el) {el.focus();
        }
    }
}

钩子函数

一个自定义组件有以下钩子函数

1. bind 只调用一次, 指令第一次绑定元素时调用, 在这里能够进行初始化设置
2. inserted 被绑定元素插入父节点时调用
3. update 所在组件的 vnode 更新时调用
4. componentUpdated 指令所在组件 vnode 及其子 vnode 全副更新后调用
5. unbind 只调用一次, 指令与元素解绑时调用

过滤器

vue 容许你自定义过滤器. 可被用于一些罕用的文件格式化. 过滤器能够用在两个中央：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始反对)。过滤器应该被增加在 JavaScript 表达式的尾部，由“管道”符号批示：

<input v-focus v-model="message" />

<div id="hook-arguments-example">{{message | capitalize}}</div>


filters: {capitalize: function (value) {return value.toUpperCase()
    }
}