createElementBlockas_createElementBlock,Fragmentas_Fragment, openBlockas_openBlock, renderSlotas_renderSlot, }from"/node_modules/.vite/deps/vue.js?v=64ab5d5e";const_sfc_main = {// ...省略};function_sfc_render(_ctx, _cache, $props, $setup, $data, $options) {return(_openBlock(),_creat...
从上面的代码可以看到createElementBlock并不是干活的地方,而是在里层先调用createBaseVNode函数,然后使用其结果再去调用setupBlock函数。 将断点走进createBaseVNode函数,在我们这个场景中简化后的代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 functioncreateBaseVNode(type,props,children){constvnode={ty...
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...
接着执行_createElementBlock("span", null, _toDisplayString(item), 1 /* TEXT */),在_createElementBlock中会先调用createBaseVNode创建vnode,在创建vnode时因为这是个block vnode(isBlockNode参数为true),所以不会被收集到currentBlock中 创建好vnode后,执行setupBlock,将currentBlock赋值给vnode.dynamicChildren。
createElementBlock的作用为生成根节点p标签的虚拟DOM,然后将收集到的动态节点数组currentBlock塞到根节点p标签的dynamicChildren属性上。 render函数的生成其实很简单,经过transform阶段处理后会生成一棵javascript AST抽象语法树,这棵树的结构和要生成的render函数结构是一模一样的。所以在generate函数中只需要递归遍历这棵树...
Vue3.x错误:vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock 见错误信息: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 index.vue:2 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock) is not a function at Proxy.render (index.vue:2) at $n (vue.global.js...
再来看看上面这个例子中生成的代码,你会发现所返回的虚拟 DOM 树是经一个特殊的createElementBlock()调用创建的: js AI检测代码解析 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)...
function createElementBlock() { return setupBlock( createBaseVNode() // ...省略 ); } createElementBlock函数会先执行createBaseVNode也就是上一步说的createElementVNode函数生成最外层div标签对应的虚拟DOM。由于外层div标签没有被标记为动态节点,所以执行createElementVNode函数也就只生成div标签的虚拟DOM。 然后...
从上图中可以看到在生成的render函数中,div标签对应的是createElementBlock方法,而在执行createElementBlock方法时并没有将descriptor.id传入进去。 将genTemplateCode函数、genScriptCode函数、genStyleCode函数执行完了后,得到templateCode、scriptCode、stylesCode,分别对应的是编译后的render函数、编译后的js代码、编译后的...