width:300px
height:300px
border-radius:150px;//圆形
border-radius: 0 300px 0px 0px;//扇形

width:600px
height:300px
border-radius:150px;//椭圆形
border-radius: 300px 300px 0px 0px;//半圆

//彩虹色
box-shadow: red 0px 0px 10px 10px, inset orange 0px 0px 10px 15px, inset yellow 0px 0px 10px 30px, inset green 0px 0px 10px 45px, inset blue 0px 0px 10px 60px, inset purple 0px 0px 10px 75px;

pre{
    white-space:pre;
    word-wrap:break-word
}

table{
    table-layout:fixed;
    width:***px;
}
table td{
    overflow:hidden;
    word-wrap:break-word;
}

element{
    overflow:hidden;
    word-wrap:break-word;
}

element{
    white-space:nowrap;
    word-break:keep-all;
}

@font-face{
    font=family:xxx;
    src:url()
}

重名的 Slots 移除
同一模板中的重名 <slot> 已经弃用。当一个 slot 已经被渲染过了，那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容，可一用 prop 来传递。

1.业务页面具体自定义内容传入
<PageComponent :pageConfig="pageConfig" ref="child">
    <div slot='tableExtend'>
    <extendTable :detailConfig="pageConfig.table.isExtend.detailConfig"
        v-if="pageConfig.table.isExtend.detailConfig[0].data.length>0">
    </extendTable>
    <div style="padding: 10px;" v-if="pageConfig.table.isExtend.detailConfig[0].data.length === 0">暂无数据</div>
    </div>
</PageComponent>

2.page组件table部分
<section class="page-table">
    <tableTemp :table="pageConfig.table" :pageConfig="pageConfig" @sendIds="receiveIds" ref="refTest">
        <slot :name='pageConfig.table.isExtend.slot' v-if="pageConfig.table.isExtend"></slot> //将slot放在这里
    </tableTemp>
</section>
3.table部分
 利用template实现列表行和扩展行一对一
 <template v-for="(value,index) in table.tableData"> 
    <tr :key="index">
        <td v-for="(val,i) in table.tableEle" v-if="val.display" :key="i">
            <div class="extendStyle" v-if='table.isExtend && i==firstShow'>
                <a v-show="index != currentActive" @click="loadDetail(value,index)"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a> //loadDetail去调父组件函数获取详情数据
                <a v-show="index === currentActive" @click="loadDetail(value,index)" class="active"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
            </div>
            <div v-if='!table.isExtend'>
            ...
            </div>
        </td>
    </tr>
    //在组装行的时候增加备用扩展行，利用第三方变量控制扩展行显示隐藏
    <tr v-if="index === currentActive" :key="index+0.5" class='bgc'>  
        <td :colspan='tdNumber' id='extend1'>//合并单元格
            <slot :name='table.isExtend.slot'></slot>//直接这样是不能渲染的，因为这样通过循环会出现多个同名slot
        </td>
    </tr>
</template> 
//去调父组件函数获取详情数据
loadDetail(item, index) {
    this.currentActive = this.currentActive === index ? -1 : index
    this.$store.commit('changeTableExtendActive',this.currentActive)
    if(this.currentActive === -1){
        return
    }
    let func = this.pageConfig.table.isExtend.func
    this.$parent.$parent[func](item,index)
},

爷爷组件
<PageComponent :pageConfig="pageConfig" ref="child">
    <template slot-scope="isExtend">
        <extendTable :detailConfig="isExtend.data.detailConfig" //包含的data中
            v-if="isExtend.data.detailConfig[0].data.length>0">
        </extendTable>
        <div style="padding: 10px;" v-if="isExtend.data.detailConfig[0].data.length === 0">暂无数据</div>
    </template>
</PageComponent>
父组件
<section class="page-table">
    <tableTemp :table="pageConfig.table" :pageConfig="pageConfig" @sendIds="receiveIds" ref="refTest">
        <slot :data='pageConfig.table.isExtend' v-if="pageConfig.table.isExtend"></slot>
    </tableTemp>
</section>
子组件
<tr v-if="index === currentActive" :key="index+0.5" class='bgc'> 
    <td :colspan='tdNumber' id='extend1'>
        <slot :data='table.isExtend'></slot> //直接使用
    </td>
</tr>

子组件
 <tr v-if="(indexx+'-'+index) === currentActive" :key="index+0.5" class='bgc'>
    <td :colspan='itemConfig.config.length'>
        <!-- slot标签要放在tdslot标签充当slot,否则详情数据拉回来之后不会进行更新组件 -->
        <tdSlot :name='itemConfig.isExtend.slot'> <slot :name='itemConfig.isExtend.slot'></slot> </tdSlot>
        <!-- tdslot在main.js中定义 -->
    </td>
</tr>
loadDetail(item, indexx, index) {
    this.currentActive = this.currentActive === indexx+'-'+index ? -1 : indexx+'-'+index //通过多层key判断展开
    if(this.currentActive === -1){
        return
    }
    let func = this.detailConfig[indexx].isExtend.func
    this.$parent.$parent[func](item,indexx, index)
}
新组件带着slot生成
Vue.component('tdSlot', {

  render(createElement) {
    function deepClone(vnodes, createElement) {
      function cloneVNode (vnode) {对slot节点进行深度复制
        const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode))
        const cloned = createElement(vnode.tag, vnode.data, clonedChildren)
        cloned.text = vnode.text
        cloned.isComment = vnode.isComment
        cloned.componentOptions = vnode.componentOptions
        cloned.elm = vnode.elm
        cloned.context = vnode.context
        cloned.ns = vnode.ns
        cloned.isStatic = vnode.isStatic
        cloned.key = vnode.key

        return cloned
      }
      const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode))
      return clonedVNodes
    }
    var slots = this.$parent.$slots.default //从父组件拿到slot
    var slot = null
    for(let i=0;i<slots.length;i++){
      if(slots[i].data && this.name === slots[i].data.slot){ //多个slot，拿到自己table.isExtend配置的那一个
        slot = slots[i]
        break
      }
    }
    return createElement('div',{class:'tdslot'},deepClone([slot], createElement)) //做一下深度复制
    <!-- return createElement('div',{class:'tdslot'},[slot]) --> 这样也可以
  },
  props:{
    name:{
      type:String,
      default:''
    }
  }
})

父组件
<detailsTable v-if="detailPageConfig.detailConfig" :detailConfig="detailPageConfig.detailConfig">
    <slot v-for='(item,index) in detailPageConfig.detailConfig' v-if='item.isExtend' :name='detailPageConfig.detailConfig[index].isExtend.slot' ></slot>
</detailsTable>
爷爷组件
<detailsPage :detailPageConfig="detailPageConfig">
    <div slot='tableExtend-1'> //多个slot 并列写即可
    <detailsTable :detailConfig="detailPageConfig.detailConfig[1].isExtend.detailConfig"
        v-if="this.detailPageConfig.detailConfig[1].isExtend.detailConfig[0].data.length>0">
    </detailsTable>
    <div v-if="this.detailPageConfig.detailConfig[1].isExtend.detailConfig[0].data.length<1">暂无数据</div>
    </div>
</detailsPage>

父组件
<template v-for='(item,index) in detailPageConfig.detailConfig'>
    <detailsTable :detailConfig="item" :key='index'>
    <slot v-if='item.isExtend' :name='item.isExtend.slot' ></slot>
    </detailsTable>
</template>
子组件
<tr v-if="index === currentActive" :key="index+0.5" class='bgc'>
    <td :colspan='detailConfig.config.length'>
        <slot></slot>//只要将自己的slot放进来即可
    </td>
</tr>

1. reactDOMComponent.js
export function setInitialProperties(
  domElement: Element,
  tag: string,
  rawProps: Object,
  rootContainerElement: Element | Document,
): void {
  const isCustomComponentTag = isCustomComponent(tag, rawProps);
  if (__DEV__) { ... }
  let props: Object;
  switch (tag) {
    case 'iframe':
    case 'object':
      trapBubbledEvent(TOP_LOAD, domElement); //trapBubbledEvent
      props = rawProps;
      break;
    case 'video':
    case 'audio':
      // Create listener for each media event
      for (let i = 0; i < mediaEventTypes.length; i++) {
        trapBubbledEvent(mediaEventTypes[i], domElement); //trapBubbledEvent
      }
      props = rawProps;
      break;
    case 'source':
      trapBubbledEvent(TOP_ERROR, domElement); //trapBubbledEvent
      props = rawProps;
      break;
    case 'img':
    case 'image':
    case 'link':
      trapBubbledEvent(TOP_ERROR, domElement); //trapBubbledEvent
      trapBubbledEvent(TOP_LOAD, domElement); //trapBubbledEvent
      props = rawProps;
      break;
    case 'form':
      trapBubbledEvent(TOP_RESET, domElement);  //trapBubbledEvent
      trapBubbledEvent(TOP_SUBMIT, domElement); //trapBubbledEvent
      props = rawProps;
      break;
    case 'details':
      trapBubbledEvent(TOP_TOGGLE, domElement); //trapBubbledEvent
      props = rawProps;
      break;
    case 'input':
      ReactDOMInputInitWrapperState(domElement, rawProps);
      props = ReactDOMInputGetHostProps(domElement, rawProps);
      trapBubbledEvent(TOP_INVALID, domElement);  //trapBubbledEvent
      // For controlled components we always need to ensure we're listening
      // to onChange. Even if there is no listener.
      ensureListeningTo(rootContainerElement, 'onChange'); // ensureListeningTo
      break;
    case 'option':
      ReactDOMOptionValidateProps(domElement, rawProps);
      props = ReactDOMOptionGetHostProps(domElement, rawProps);
      break;
    case 'select':
      ReactDOMSelectInitWrapperState(domElement, rawProps);
      props = ReactDOMSelectGetHostProps(domElement, rawProps);
      trapBubbledEvent(TOP_INVALID, domElement);    //trapBubbledEvent
      // For controlled components we always need to ensure we're listening
      // to onChange. Even if there is no listener.
      ensureListeningTo(rootContainerElement, 'onChange');  // ensureListeningTo
      break;
    case 'textarea':
      ReactDOMTextareaInitWrapperState(domElement, rawProps);
      props = ReactDOMTextareaGetHostProps(domElement, rawProps);
      trapBubbledEvent(TOP_INVALID, domElement);  //trapBubbledEvent
      // For controlled components we always need to ensure we're listening
      // to onChange. Even if there is no listener.
      ensureListeningTo(rootContainerElement, 'onChange'); // ensureListeningTo
      break;
    default:
      props = rawProps;
  }

  assertValidProps(tag, props);

  setInitialDOMProperties(
    tag,
    domElement,
    rootContainerElement,
    props,
    isCustomComponentTag,
  );//这个函数中也会用到 ensureListeningTo

  switch (tag) {
   //给一些DOM标签通过setAttribute赋值
  }
}

function setInitialDOMProperties(
  tag: string,
  domElement: Element,
  rootContainerElement: Element | Document,
  nextProps: Object,
  isCustomComponentTag: boolean,
): void {
    if(...){
      ...
    } else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp != null) {
        if (__DEV__ && typeof nextProp !== 'function') {
          warnForInvalidEventListener(propKey, nextProp);
        }
        ensureListeningTo(rootContainerElement, propKey); // ensureListeningTo
      }
    } else if (nextProp != null) {
      setValueForProperty(domElement, propKey, nextProp, isCustomComponentTag);
    }
  }
}

function ensureListeningTo(rootContainerElement, registrationName) {
  const isDocumentOrFragment =
    rootContainerElement.nodeType === DOCUMENT_NODE ||
    rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE;
  const doc = isDocumentOrFragment
    ? rootContainerElement
    : rootContainerElement.ownerDocument;
  listenTo(registrationName, doc);
}

2.ReactBrowerEventEmitter.js

export function listenTo(
  registrationName: string,
  mountAt: Document | Element,
) {
  const isListening = getListeningForDocument(mountAt);
  const dependencies = registrationNameDependencies[registrationName];

  for (let i = 0; i < dependencies.length; i++) {
    const dependency = dependencies[i];
    if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
      switch (dependency) {
        case TOP_SCROLL:
          trapCapturedEvent(TOP_SCROLL, mountAt);
          break;
        case TOP_FOCUS:
        case TOP_BLUR:
          trapCapturedEvent(TOP_FOCUS, mountAt);
          trapCapturedEvent(TOP_BLUR, mountAt);
          // We set the flag for a single dependency later in this function,
          // but this ensures we mark both as attached rather than just one.
          isListening[TOP_BLUR] = true;
          isListening[TOP_FOCUS] = true;
          break;
        case TOP_CANCEL:
        case TOP_CLOSE:
          if (isEventSupported(getRawEventName(dependency))) {
            trapCapturedEvent(dependency, mountAt);
          }
          break;
        case TOP_INVALID:
        case TOP_SUBMIT:
        case TOP_RESET:
          // We listen to them on the target DOM elements.
          // Some of them bubble so we don't want them to fire twice.
          break;
        default:
          // By default, listen on the top level to all non-media events.
          // Media events don't bubble so adding the listener wouldn't do anything.
          const isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
          if (!isMediaEvent) {
            trapBubbledEvent(dependency, mountAt);
          }
          break;
      }
      isListening[dependency] = true;
    }
  }
}

3. ReactDOMEventListener.js

export function trapBubbledEvent(
  topLevelType: DOMTopLevelEventType,
  element: Document | Element,
) {
  if (!element) {
    return null;
  }
  const dispatch = isInteractiveTopLevelEventType(topLevelType) 
    ? dispatchInteractiveEvent
    : dispatchEvent;

  addEventBubbleListener(
    element,//document
    getRawEventName(topLevelType),//事件类型
    // Check if interactive and wrap in interactiveUpdates
    dispatch.bind(null, topLevelType), //回调函数是分发函数 详见执行过程
  );
}
export function trapCapturedEvent(topLevelType, element){...}
export function dispatchEvent(topLevelType,nativeEvent) {... }

4. EventListener.js
export function addEventBubbleListener(
  element: Document | Element,
  eventType: string,
  listener: Function,
): void {
  element.addEventListener(eventType, listener, false);
}
export function addEventCaptureListener(){...}

//ReactDOMEventListener
export function dispatchEvent(
  topLevelType: DOMTopLevelEventType,
  nativeEvent: AnyNativeEvent,
) {
  if (!_enabled) {
    return;
  }

  const nativeEventTarget = getEventTarget(nativeEvent);
  let targetInst = getClosestInstanceFromNode(nativeEventTarget);
  if (
    targetInst !== null &&
    typeof targetInst.tag === 'number' &&
    !isFiberMounted(targetInst)
  ) {
    // If we get an event (ex: img onload) before committing that
    // component's mount, ignore it for now (that is, treat it as if it was an
    // event on a non-React tree). We might also consider queueing events and
    // dispatching them after the mount.
    targetInst = null;
  }

  const bookKeeping = getTopLevelCallbackBookKeeping(
    topLevelType,
    nativeEvent,
    targetInst,
  );

  try {
    // Event queue being processed in the same cycle allows
    // `preventDefault`.
    batchedUpdates(handleTopLevel, bookKeeping);
  } finally {
    releaseTopLevelCallbackBookKeeping(bookKeeping);
  }
}

function handleTopLevel(bookKeeping) {
  let targetInst = bookKeeping.targetInst;

  // Loop through the hierarchy, in case there's any nested components.
  // It's important that we build the array of ancestors before calling any
  // event handlers, because event handlers can modify the DOM, leading to
  // inconsistencies with ReactMount's node cache. See #1105.
  let ancestor = targetInst;
  do {
    if (!ancestor) {
      bookKeeping.ancestors.push(ancestor);
      break;
    }
    const root = findRootContainerNode(ancestor);
    if (!root) {
      break;
    }
    bookKeeping.ancestors.push(ancestor);
    ancestor = getClosestInstanceFromNode(root);
  } while (ancestor);

  for (let i = 0; i < bookKeeping.ancestors.length; i++) {
    targetInst = bookKeeping.ancestors[i];
    runExtractedEventsInBatch(
      bookKeeping.topLevelType,
      targetInst,
      bookKeeping.nativeEvent,
      getEventTarget(bookKeeping.nativeEvent),
    );
  }
}

//ReactGenericBatching.js
export function batchedUpdates(fn, bookkeeping) {
  if (isBatching) {
    // If we are currently inside another batch, we need to wait until it
    // fully completes before restoring state.
    return fn(bookkeeping);
  }
  isBatching = true;
  try {
    return _batchedUpdatesImpl(fn, bookkeeping);
  } finally {
    // Here we wait until all updates have propagated, which is important
    // when using controlled components within layers:
    // https://github.com/facebook/react/issues/1698
    // Then we restore state of any controlled component.
    isBatching = false;
    const controlledComponentsHavePendingUpdates = needsStateRestore();
    if (controlledComponentsHavePendingUpdates) {
      // If a controlled event was fired, we may need to restore the state of
      // the DOM node back to the controlled value. This is necessary when React
      // bails out of the update without touching the DOM.
      _flushInteractiveUpdatesImpl();
      restoreStateIfNeeded();
    }
  }
}
let _batchedUpdatesImpl = function(fn, bookkeeping) {
  return fn(bookkeeping);
};

//EventPluginHub
export function runExtractedEventsInBatch(
  topLevelType: TopLevelType,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: EventTarget,
) {
  const events = extractEvents(//生成合成事件
    topLevelType,
    targetInst,
    nativeEvent,
    nativeEventTarget,
  );
  runEventsInBatch(events); //批量更新
}
export function runEventsInBatch(
  events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null,
) {
  if (events !== null) {
    eventQueue = accumulateInto(eventQueue, events);
  }

  // Set `eventQueue` to null before processing it so that we can tell if more
  // events get enqueued while processing.
  const processingEventQueue = eventQueue;
  eventQueue = null;

  if (!processingEventQueue) {
    return;
  }

  forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);//批量执行
  invariant(
    !eventQueue,
    'processEventQueue(): Additional events were enqueued while processing ' +
      'an event queue. Support for this has not yet been implemented.',
  );
  // This would be a good time to rethrow if any of the event handlers threw.
  rethrowCaughtError();
}

//EventPluginHub
function extractEvents(
  topLevelType: TopLevelType,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: EventTarget,
): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
  let events = null;
  for (let i = 0; i < plugins.length; i++) {
    // Not every plugin in the ordering may be loaded at runtime.
    const possiblePlugin: PluginModule<AnyNativeEvent> = plugins[i];
    if (possiblePlugin) {
      const extractedEvents = possiblePlugin.extractEvents(
        topLevelType,
        targetInst,
        nativeEvent,
        nativeEventTarget,
      );
      if (extractedEvents) {
        events = accumulateInto(events, extractedEvents);
      }
    }
  }
  return events;
}

//DOMEventPluginOrder
const DOMEventPluginOrder = [
  'ResponderEventPlugin',
  'SimpleEventPlugin',
  'EnterLeaveEventPlugin',
  'ChangeEventPlugin',
  'SelectEventPlugin',
  'BeforeInputEventPlugin',
];

export default DOMEventPluginOrder;

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  if (!getter && arguments.length === 2) {
    val = obj[key]
  }
  const setter = property && property.set

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    /******/
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) { 
        dep.depend()//获取这个值时，即将获取的这个地方当作订阅者放到订阅者列表中
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    /******/
    /******/
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) { //与旧值相同，直接return 不更新
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal //与旧值不同，重新赋值
      }
      childOb = !shallow && observe(newVal)
      dep.notify() //通知更新
    }
    /******/
  })
}

mport type Watcher from './watcher' //或初始化watcher
import { remove } from '../util/index'

let uid = 0

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = [] //订阅者集合
  }

  addSub (sub: Watcher) {  //添加订阅者集合
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () { //批量更新
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
const targetStack = []

export function pushTarget (_target: ?Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target  //将watcher缓存到Dep.target
}

export function popTarget () {
  Dep.target = targetStack.pop()
}

export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  getter: Function;
  value: any;

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.value = this.lazy
      ? undefined
      : this.get() //将watcher 自己装进变量的订阅者列表
  }

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  get () {
    pushTarget(this) //暂存到Dep.target
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm) //调用变量的getter函数，将自己装到订阅者列表
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()//取消watcher暂存，释放该watcher的绑定
      this.cleanupDeps()
    }
    return value
  }

  
  /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update () { //dep批量更新调用
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  /**
   * Scheduler job interface.
   * Will be called by the scheduler.
   */
  run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue) //执行更新回调
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {
          this.cb.call(this.vm, value, oldValue) //执行更新回调
        }
      }
    }
  }
}

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (Array.isArray(value)) { //数组
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  /**
   * Walk through each property and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]) //判断对数组值进行判断
    }
  }
}
export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) && //值又是数组
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value) //递归转化
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob

父组件配置对象
modelConfig: {
        title: '授权',
        modalId: 'modelConfig',
        isAdd: true,
        config: [
          {label: '策略', value: 'v_policy_selected', option: 'v_policy_option', placeholder: '', disabled: false, type: 'select',v_validate: 'required:true',isError: false},
          {name: 'selectAz', type: 'slot', v_validate:[
            {label: '租户', value: 'v_tenant_selected', isError: 'v_tenant_isError', type: 'select'},
            {label: '项目', value: 'v_project_selected', isError: 'v_project_isError', type: 'select'}
          ]}],
        addRow: { // 其他配置项绑定的数据
          
        },
        v_select_configs: {
          v_policy_selected: null, // 选中数据
          v_policy_option: [], // 选择数据
          v_project_selected: null, // 选中数据
          v_project_option: [], // 选择数据
          v_project_isError: false,
          v_tenant_selected: null, // 选中数据
          v_tenant_option: [], // 选择数据
          v_tenant_isError: false
        },
        saveFunc: 'authSave'
      }

<label v-show="errors.has(item.value) && isHide(item.hide)" class="col-md-7 help is-danger">{{item.label}} {{errors.first(item.value)}}</label>
<label v-if="item.type === 'select' && item.isError" class="col-md-7 help is-danger">{{item.label}} 不能为空</label>

<div slot="selectAz">
<v-select
          v-model="modelConfig.v_select_configs.v_region_selected"
          label="name"
          class="col-md-7 v-selectss "
          :on-change="changeRegion"
          :options="modelConfig.v_select_configs.v_region_option">
</v-select>
<label class="required-tip">*</label>
<label v-if="modelConfig.v_select_configs.v_region_isError" class="col-md-7 help is-danger">xxx 不能为空</label>
</div>

具体代码
 formValidate () {
        return this.$validator.validate().then(result => {
          //result 为false插件验证input没有填写完整,true为验证填写完整
          /** 验证 select是否进行了选填 实例可参照 [manage][authorizations]user-authorized.vue **/
          let flag = true
          for(let i=0; i< this.modelConfig.config.length; i++){
            if(!this.isHide (this.modelConfig.config[i].hide)){
              continue
            }
            /* ****** 配置里面的select ***** */
            //配置规则为：在配置type:selcet时，如需校验则添加v_validate: 'required:true',isError: false==>控制错误提示label显示
            //如果无需校验，则不添加
            if(this.modelConfig.config[i].type === 'select' && this.modelConfig.config[i].v_validate) { 
              let obj = this.modelConfig.config[i]
              if(!this.modelConfig.v_select_configs[obj.value]){
                this.modelConfig.config[i].isError = true
                flag = false
              }else{
                this.modelConfig.config[i].isError = false
              }
            }
            /* ******  slot里面的select  ****** */
            //配置规则为：在配置type:slot 时，添加 v_validate:[],数组里面存放需要校验的select的配置信息
            //value:绑定值,isError:错误标签显示绑定值，type:select  ===> 如果以后再校验其他类型，再增加判断逻辑
            //{name:'xxxx',type:'slot',v_validate:[{value: 'v_xxx_selected', isError: 'v_xxx_isError', type: 'select'}]}
            //同时在this.modelConfig.v_select_configs里面定义v_xxx_isError：false
            //slot里面错误提示label显示用 v-if="modelConfig.v_select_configs.v_xxx_isError" 搭配其他具体规则进行组合
            if(this.modelConfig.config[i].type === 'slot') { 
              let arr = this.modelConfig.config[i].v_validate ? this.modelConfig.config[i].v_validate :[]
              for(let j =0;j<arr.length;j++){
                let key = arr[j].isError
                let value = arr[j].value
                if(arr[j].type === 'select' && !this.modelConfig.v_select_configs[value]) {
                  this.modelConfig.v_select_configs[key] = true
                  flag = false
                }else{
                  this.modelConfig.v_select_configs[key] = false
                }
              }
            }
          }
          return result && flag
        })
      },

data () {
     return {
       configCopy:this.modelConfig,
       FLAG:false
     }
   },
props: ['modelConfig'],
watch:{
     configCopy: {
       handler(){ 
         //select选择完将提示隐藏，如果日后保留'X'删除功能，如需要，再增加显示处理逻辑
         for(let key in this.modelConfig.v_select_configs) { //slot select
           if(key.endsWith('isError')){
             let prefix = key.slice(0,-7)
             if(this.modelConfig.v_select_configs[key] && this.modelConfig.v_select_configs[prefix+'selected']){
               this.modelConfig.v_select_configs[key] = false
             }
           }
         }
         for(let i=0; i< this.modelConfig.config.length; i++){ //config select
           if(this.modelConfig.config[i].type === 'select' && this.modelConfig.config[i].v_validate) { 
             let obj = this.modelConfig.config[i]
             if(this.modelConfig.v_select_configs[obj.value]){
               this.modelConfig.config[i].isError = false
             }
           }
         }
       },
       deep:true
     }
   },

// 清除表单selected
     for(let i=0; i<this.modelConfig.config.length; i++){
       if(this.modelConfig.config[i].type === 'select' && this.modelConfig.config[i].v_validate) {
         this.modelConfig.config[i].isError = false
       }
       if(this.modelConfig.config[i].type === 'slot') { 
         let arr = this.modelConfig.config[i].v_validate ? this.modelConfig.config[i].v_validate :[]
         for(let j =0;j<arr.length;j++){
           let key = arr[j].isError
           let value = arr[j].value
           if(arr[j].type === 'select' && !this.modelConfig.v_select_configs[value]) {
             this.modelConfig.v_select_configs[key] = false
           }
         }
       }
     }

//一般实现
 <div id="demo">
    <div v-if="show" style="z-index:99999;width200px;margin-left:20px;margin-top:-20px;background-color:#00a4ff;width:200px;position: absolute;border-radius:5px;padding-top: 5px;">
      <marquee >
      <span style="font-weight: bolder;font-size: 10px;color: white;">Welcom CMRH!</span>
    </marquee>
    </div>
  <button @mouseover="show = !show" @mouseout="show = !show">
    Toggle
  </button>
</div>

//全局定义
Vue.directive('demo', function (el, binding) {
  console.log(el,binding)
  let str = '<div id="pointer" style="z-index:99999;width200px;margin-left:20px;margin-top:-20px;background-color:#00a4ff;width:200px;position: absolute;border-radius:5px;padding-top: 5px;"><marquee><span style="font-weight: bolder;font-size: 10px;color: white;">'
   + binding.value.text + 
   '</span></marquee></div>'
  $(el).mouseover (function() {
    $(el).prepend(str)
  })
  $(el).mouseout (function() {
    $('#pointer').remove()
  })
})

//使用
<div v-demo="{ color: 'white', text: 'hello!' }">111111</div>

this.timerID = setInterval(fn, time);
clearInterval(this.timerID);

this.timerID = $interval(fn, time);
$interval.cancel(this.timerID)