zoukankan      html  css  js  c++  java
  • vue中相同逻辑如何抽离

    就是使用Vue.mixin方法(混入),其提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。说白了就是给每个生命周期,函数等等中间加入一些公共逻辑。

    //vue/src/core/global-api/mixin.js 
    
    import { mergeOptions } from '../util/index'
    
    export function initMixin (Vue: GlobalAPI) {
      Vue.mixin = function (mixin: Object) {
        this.options = mergeOptions(this.options, mixin)
        return this
      }
    }
    
    --------------------------------------------------------------------
    //vue/src/core/util/options.js /
    /**
     * Merge two option objects into a new one.
     * Core utility used in both instantiation and inheritance.
     */
    export function mergeOptions (
      parent: Object,
      child: Object,
      vm?: Component
    ): Object {
      if (process.env.NODE_ENV !== 'production') {
        checkComponents(child)
      }
    
      if (typeof child === 'function') {
        child = child.options
      }
    
      normalizeProps(child, vm)
      normalizeInject(child, vm)
      normalizeDirectives(child)
    
      // Apply extends and mixins on the child options,
      // but only if it is a raw options object that isn't
      // the result of another mergeOptions call.
      // Only merged options has the _base property.
      if (!child._base) {
        if (child.extends) { //递归合并extends
          parent = mergeOptions(parent, child.extends, vm)
        }
        if (child.mixins) { //递归合并mixin
          for (let i = 0, l = child.mixins.length; i < l; i++) {
            parent = mergeOptions(parent, child.mixins[i], vm)
          }
        }
      }
    
      const options = {} //属性和生命周期的合并
      let key
      for (key in parent) {
        mergeField(key)
      }
      for (key in child) {
        if (!hasOwn(parent, key)) {
          mergeField(key)
        }
      }
      function mergeField (key) {
        const strat = strats[key] || defaultStrat
        options[key] = strat(parent[key], child[key], vm, key)
      }
      return options
    }
  • 相关阅读:
    JetBrains注册码计算(IntelliJ IDEA 15.0注册码激活)
    java分页数据导出excel
    linux系统关机与重新启动命令
    无向图的连通性分析
    流域水文模拟
    深信服笔试题(网络project师售后)
    CSS这些代码你都不会,你还有什么好说的!!!
    springMVC3学习(四)--訪问静态文件如js,jpg,css
    POJ 3311 Hie with the Pie(状压DP + Floyd)
    NSDictionary所有API的学习。
  • 原文地址:https://www.cnblogs.com/qq965921539/p/13412596.html
Copyright © 2011-2022 走看看