// Replace the Caching,Components in the Web environment
extend(Vue.options.directives,platformDirectives)
Copy the code

platformDirectives

bind

Only called once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings

  bind(el,{value},vnode){
    // Locate the VNode corresponding to the EL
    vnode = locateNode(vnode)
    // Get the transition bound on vNode
    const transition = vnode.data && vnode.data.transition
    // Get the display style on el
    const originalDisplay = el._vOriginalDisplay = el.style.display === 'none' ? ' ' : el.style.display
    // The transition that exists when data is mounted on the EL
    if(value && transition){
      // Bind the element that triggers the entry change of transiton
      vnode.data.show = true
      enter(vnode,() = > {
        el.style.display = originalDisplay
      })
    }else{
      // If there is no transition, the dom is displayed based on whether there is data
      el.style.display = value ? originalDisplay : 'none'}}Copy the code

inserted

Called when the bound element is inserted into the parent node (the parent is guaranteed to exist, but not necessarily to have been inserted into the document)

inserted(el,binding,vnode,oldVnode){
  if(vnode.tag === 'select') {// The inserted node is a SELECT
      if(oldVnode.elm && ! oldVnode.elm._vOptions){// If the old node Options does not exist, update it
        mergeVNodeHook(vnode,'postpatch'.() = > {
          componentUpdated(el,binding,vnode)
        })
      }else{
        // Set select selected
        setSelected(el,binding,vnode.context)
      }
  }else if(vnode.tag === 'textarea' || isTextInputType(el.type)){
    // Insert the node as some type of textarea or input
    // Mount the directive modifier on el
    el._vModifiers = binding.modifiers
    if(! binding.modifiers.lazy){// Bind inputDom to the start/end event and the change event
      el.addEventListener('compositionstart',onCompositionStart)
      el.addEventListener('compositionend',onCompositionEnd) // The input method ends, raising the input event
      el.addEventListener('change',onCompositionEnd)
      if(isIE9){
        el.vmodel = true}}}}Copy the code

update

Called when the component’s VNode is updated, but may occur before its child VNodes are updated

update(el,{value,oldValue},vnode){
  // Before and after the update, the state of the value is the same (exists or does not exist),el does not change
  if(! value === ! oldValue)return
  vnode = locate(vnode)
  const transition = vnode.data && vnode.data.transition
  // When the state of the value changes
  if(transition){
    vnode.data.show = true
    // If the value exists after the update, the transiton-Enter state is triggered
    if(value){
      enter(vnode,() = > {
        el.style.display = el._vOriginalDisplay
      })
    }else{
      // If the value does not exist after the update, the transiton-leave state is triggered
      leave(vnode,() = > {
        el.style.display = 'none'}}})else{
    // There is no transition
    el.style.display = value ? el._vOriginalDisplay : 'none'}}Copy the code

componentUpdated

Called after the VNode of the component where the directive resides and its child nodes are all updated

componentUpdated(el,binding,vnode){
  if(vnode.tag === 'select') {// Set the select option
    setSelected(el,binding,vnode.context)
    const prevOptions = el._vOptions
    const curOptions = el._vOptions = [].map.call(el.options,getValue)
    // Check whether options are changed before and after the update
    if(curOptions.some((o,i) = >! looseEqual(o,prevOptions[i]))){const needReset = el.multiple ? binding.value.some(v= >hasNoMatchingOption(v,curOptions)) : binding.value ! == binding.oldValue && hasNoMatchingOption(binging.value,curOptions)// The change event of select is triggered
      if(needReset){
        trigger(el,'change')}}}}Copy the code

unbind

Only called once, when an instruction is unbound from an element

unbind(el,binding,vnode,oldVnode,isDestroy){
  // Restore the display state of el by destroying it
  if(! isDestroy){ el.style.display = el._vOriginalDisplay } }Copy the code