从上面的代码可以看到createElementBlock并不是干活的地方,而是在里层先调用createBaseVNode函数,然后使用其结果再去调用setupBlock函数。 将断点走进createBaseVNode函数,在我们这个场景中简化后的代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 functioncreateBaseVNode
AI代码解释 import{toDisplayStringas_toDisplayString,openBlockas_openBlock,createElementBlockas_createElementBlock}from"/node_modules/.vite/deps/vue.js?v=23bfe016";function_sfc_render(_ctx,_cache,$props,$setup,$data,$options){return_openBlock(),_createElementBlock("p",null,_toDisplayString($setu...
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {return _openBlock(), _createElementBlock(_Fragment,null,[_createElementVNode("div",{ title: $setup.title },"Hello Word",8,hoisted ),_createElementVNode("div",{ title: $setup.title },"Hello Word",8,hoisted ),_cr...
从上图中可以看到在生成的render函数中,div标签对应的是createElementBlock方法,而在执行createElementBlock方法时并没有将descriptor.id传入进去。 将genTemplateCode函数、genScriptCode函数、genStyleCode函数执行完了后,得到templateCode、scriptCode、stylesCode,分别对应的是编译后的render函数、编译后的js代码、编译后的s...
createElementBlockas_createElementBlock, }from"vue";functionrender(_ctx, _cache, $props, $setup, $data, $options) {return(_openBlock(),_createElementBlock( _Fragment,null, [_createElementVNode("h1",null,_toDisplayString($setup.title)),_createElementVNode("h1",null,_toDisplayString($setup.msg...
openBlock中,如果disableTracking为true,会将currentBlock设置为null;否则创建一个新的数组并赋值给currentBlock,并push到blockStack中。 再看createBlock,createBlock调用一个setupBlock方法。 export function createBlock( type: VNodeTypes | ClassComponent,
createElementBlockas_createElementBlock, defineComponentas_defineComponent, openBlockas_openBlock, toDisplayStringas_toDisplayString, ref, }from"/node_modules/.vite/deps/vue.js?v=23bfe016";import"/src/App.vue?vue&type=style&index=0&scoped=7a7a37b1 .css";const_sfc_main =_defineComponent({__name...
首先item为1,执行renderItem,执行_openBlock()创建一个新的数组(称其为span1-block),并push到blockStack栈顶。此时blockStack、currentBlock状态如下如: 在这里插入图片描述 接着执行_createElementBlock("span", null, _toDisplayString(item), 1 /* TEXT */),在_createElementBlock中会先调用createBaseVNode创建vno...
再来看看上面这个例子中生成的代码,你会发现所返回的虚拟 DOM 树是经一个特殊的createElementBlock()调用创建的: js export function render() { return (_openBlock(), _createElementBlock(_Fragment, null, [ /* children */ ], 64 /* STABLE_FRAGMENT */)) ...
const msg=ref("Hello World");console.log(msg.value);const __returned__={ msg };return__returned__;},});function_sfc_render(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createElementBlock(_Fragment,null,[_createElementVNode("p",null,_toDisplayString($setup.msg),1)...