Posted 2021-05-13 JavaScript楂樼骇绋嬪簭璁捐

鏈潵鍑嗗寮€濮嬩箣鍓嶆墦绠楀ソ鐨勬柊椤圭洰锛屾墦绠楀熀浜巘aro杩涜澶氱寮€鍙戙€備絾鏄湰鍦板畨瑁呯殑鐗堟湰澶綆锛岀敤taro update 鏇存柊鐗堟湰锛岀劧鍚巘aro init 鍛戒护鍒涘缓鍒濆鍖栭」鐩悗锛岄」鐩牴鏈窇姝ヨ捣鏉ャ€傜己灏戝悇绉嶄緷璧?..鏃犺浜?..馃樁

鍓嶆儏鍥為【

鏄ㄥぉ鍙戠殑鐗㈤獨閲屾劅瑙塚ue鐨勪笁涓姛鑳芥槸瑙ｆ瀽骞舵覆鏌揾tml妯℃澘锛?code class="mq-10">瑙ｆ瀽骞舵墽琛宩s锛?code class="mq-11">瑙ｆ瀽骞舵覆鏌揷ss鏍峰紡銆傜劧鍚庢湁涓牳蹇冩蹇?code class="mq-12">vdom,閭ｄ箞杩欎釜铏氭嫙dom锛坴dom锛?/code>鍦ㄤ唬鐮侀噷鏄€庝箞浣撶幇鐨勫憿銆備竴璧锋潵鐪嬩笅銆?/p>

vdom鏂囦欢澶?/span>

濡傚浘:

浠庝笂鑷充笅锛?code class="mq-21">helpers鏂囦欢澶瑰畾涔変簡涓€浜涚被浼煎伐鍏锋柟娉曠殑鍑芥暟锛屾瘮濡傦細鎻愬彇props,鍚堝苟hooks,瑙ｆ瀽寮傛缁勪欢,鏇存柊渚﹀惉鍣?/code>銆?code class="mq-26">modules鏂囦欢澶瑰畾涔変簡鎸囦护鍜?code class="mq-28">ref鐩稿叧鐨勫唴瀹广€備笁涓?code class="mq-29">create-**.js瀹氫箟浜嗙粍浠躲€佸厓绱犮€佸嚱鏁扮粍浠剁殑鍒涘缓鏂规硶銆?code class="mq-30">patch.js鍒欐槸铏氭嫙dom鐨刣iff绠楁硶銆?code class="mq-31">vnode.js鍒欐槸瀵硅櫄鎷焏om鐨勫畾涔夈€?/p>

vnode鐨勫畾涔?/span>

浠庝唬鐮侀噷鐪嬶紝vnode鏄竴涓被浼煎涓嬬殑瀵硅薄锛?/p>

let myNode = {
  tag:'div',
  data:{
    key:'1',
    tag:'div',
    class:"box-wrapper",
    style:{width:'100%'},
    props:{
      name:'terrene',
    },
    attrs:{
      alt:'pic'
    },
    on:{
      click:()=>{console.log('click')}
    },
    
  },
  children:[]
}

杩欎釜瀵硅薄鍐欏嚭鏉ヤ互鍚庯紝寰堝鏄撹仈鎯冲埌鎴戜滑鏈夋椂鍊欏湪閬囧埌vue琛ㄦ牸鑷畾涔夊唴瀹圭殑鏃跺€欙紝鏈夋椂鍊欎細鍐欎竴涓?code class="mq-68">render鍑芥暟锛岄€氬父鐢?code class="mq-69">h('div',{...})鏉ヨ〃绀猴紝杩欎釜h鍑芥暟閲岄潰鍏跺疄灏辨槸杩欎釜vnode瀵硅薄銆?/p>

鍒涘缓vnode

鍒涘缓vnode瀹為檯涓婂氨鏄vnode鏋勯€犲嚱鏁拌繘琛屽疄渚嬪寲銆傛瘮濡傚垱寤轰竴涓?code class="mq-79">emptyNode(绌鸿妭鐐?銆?/p>

export const createEmptyVNode = (text: string = '') => {
// 杩欓噷杩涜瀹炰緥鍖栨搷浣?/span>
  const node = new VNode()
  node.text = text
  node.isComment = true
  return node
}

鍐嶆瘮濡傚垱寤轰竴涓枃鏈妭鐐?code class="mq-94">textNode

export function createTextVNode (val: string | number) {
// 鍙堟槸涓€涓疄渚嬪寲鎿嶄綔
  return new VNode(undefined, undefined, undefined, String(val))
}

鍚岀悊锛屽垱寤虹粍浠朵篃鏄vnode杩涜瀹炰緥鍖栫殑杩囩▼銆備絾鏄敱浜庣粍浠跺寘鍚簡鐢熷懡鍛ㄦ湡锛屽疄渚嬪寲鐨勮繃绋嬩腑浼氬皢鐢熷懡鍛ㄦ湡鐨勯挬瀛愬嚱鏁癿erge杩涘幓銆?/p>

鍒涘缓鍑芥暟寮忕粍浠?/span>

鍑芥暟寮忕粍浠跺厛鏄畾涔変簡涓€涓被vnode鐨勬瀯閫犲嚱鏁帮紝鐒跺悗鏋勯€犲嚱鏁拌繑鍥炰簡涓€涓敱createElement鏂规硶鐢熸垚鐨勪竴涓獀node瀹炰緥銆?/p>

function FunctionalRenderContext (
  data,
  props,
  children,
  parent,
  Ctor
) {
  const options = Ctor.options
  this.data = data
  this.props = props
  this.children = children
  this.parent = parent
  this.listeners = data.on || emptyObject
  this.injections = resolveInject(options.inject, parent)
  this.slots = () => resolveSlots(children, parent)

  // ensure the createElement function in functional components
  // gets a unique context - this is necessary for correct named slot check
  const contextVm = Object.create(parent)
  const isCompiled = isTrue(options._compiled)
  const needNormalization = !isCompiled

  // support for compiled functional template
  if (isCompiled) {
    // exposing $options for renderStatic()
    this.$options = options
    // pre-resolve slots for renderSlot()
    this.$slots = this.slots()
    this.$scopedSlots = data.scopedSlots || emptyObject
  }

  if (options._scopeId) {
    this._c = (a, b, c, d) => {
      const vnode: ?VNode = createElement(contextVm, a, b, c, d, needNormalization)
      if (vnode) {
        vnode.functionalScopeId = options._scopeId
        vnode.functionalContext = parent
      }
      return vnode
    }
  } else {
    this._c = (a, b, c, d) => createElement(contextVm, a, b, c, d, needNormalization)
  }
}

createFunctionalComponent鍑芥暟杩斿洖浜嗚繖涓瀯閫犲嚱鏁扮殑瀹炰緥銆?/p>

export function createFunctionalComponent (
  Ctor: Class<Component>,
  propsData: ?Object,
  data: VNodeData,
  contextVm: Component,
  children: ?Array<VNode>
): VNode | void {
  const options = Ctor.options
  const props = {}
  const propOptions = options.props
  if (isDef(propOptions)) {
    for (const key in propOptions) {
      props[key] = validateProp(key, propOptions, propsData || emptyObject)
    }
  } else {
    if (isDef(data.attrs)) mergeProps(props, data.attrs)
    if (isDef(data.props)) mergeProps(props, data.props)
  }
// 瀹炰緥鍖朏unctionalRenderContext
  const renderContext = new FunctionalRenderContext(
    data,
    props,
    children,
    contextVm,
    Ctor
  )
// 杩欓噷杩涜杩斿洖
  const vnode = options.render.call(null, renderContext._c, renderContext)

  if (vnode instanceof VNode) {
    vnode.functionalContext = contextVm
    vnode.functionalOptions = options
    if (data.slot) {
      (vnode.data || (vnode.data = {})).slot = data.slot
    }
  }

  return vnode
}

鎬濊€?/span>

婧愮爜鏄釜宸ョ▼鍖栫殑涓滆タ锛岄噷闈㈢殑閫昏緫闈炲父澶嶆潅锛岃€屼笖鏂规硶鐨勮皟鐢ㄩ兘鏄郊姝ょ浉浜掑紩鐢ㄣ€傛瘮濡倂dom涓湁寰堝鍦版柟涔熺敤鍒颁簡lifecycle鐨勬柟娉曘€傝€宭ifecycle鏈韩涔熸槸涓潪甯稿鏉傜殑涓滆タ銆?/p>

杩欑瘒鍐呭澶ц嚧浠嬬粛浜?code class="mq-199">vdom涓秹鍙婄殑鍐呭浠ュ強vdom鐨勫垱寤恒€傜粏鑺傞儴鍒嗘帴涓嬫潵浼氭參鎱㈢殑鎷嗚В銆?/p>

鏈€鍚庤涓ゅ彞

1. 鍔ㄤ竴鍔ㄦ偍鍙戣储鐨勫皬鎵嬶紝 銆岀偣涓禐鍚с€?/code>
2. 鍔ㄤ竴鍔ㄦ偍鍙戣储鐨勫皬鎵嬶紝 銆岀偣涓湪鐪嬨€?/code>
3. 閮界湅鍒拌繖閲屼簡锛屼笉濡?  銆屽姞涓叧娉ㄣ€?/code>
4. 涓嶅Θ   銆岃浆鍙戜竴涓嬨€?/code>锛屽ソ涓滆タ瑕佽寰楀垎浜?

javascript鍩虹鐭ヨ瘑鎬荤粨

以上是关于的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数