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
         }
       };

用法

可以在项目里新建一个mixin目录, 创建一个js文件,在文件里需要输出一个对象

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

选项合并

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

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

自定义组件

简介

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


directives: {   
    focus: {
        inserted: function (el) {
            el.focus();
        }
    }
}

钩子函数

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

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

过滤器

vue允许你自定义过滤器. 可被用于一些常用的文件格式化.过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：



{{message | capitalize}}


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