关于vue.js:vue可复用性

罕用场景

有两个类似的组件, 他们基本功能是一样的, 然而他们之前又存在差别, 失常思维是: 是把它拆成两个不同的组件呢, 还是保留为一个组件, 应用 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

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

选项合并

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

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

简介

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

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

钩子函数

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

bind 只调用一次, 指令第一次绑定元素时调用, 在这里能够进行初始化设置
inserted 被绑定元素插入父节点时调用
update 所在组件的 vnode 更新时调用
componentUpdated 指令所在组件 vnode 及其子 vnode 全副更新后调用
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()
    }
}

混入 mixin

罕用场景

根底实例

用法

选项合并

自定义组件

简介

钩子函数

过滤器