vue 编译vue 的元素节点会在compile时转为render方法 createElement ` 但是当我们不用w

vue 的元素节点会在compile时转为render方法 createElement `

<template>
    <div>
        <h1 class="title">我是标题</h1>
        <p>我是内容</p>
    </div>
</template>

render(createElement){
    return createElement(
        'div',
        null,
        [createElement(
            'h1',
            {
                class: 'title'
            },
            '我是标题'
        ),
        createElement(
            'p',
            null,
            '我是内容'
        )]
    )
}

但是当我们不用webpack开发时，

<html>
<div id="app">
<div>{{name}}</div>
</div>
</html>

new Vue (
data:{
name:'test'
}
)

它是如何执行的？通过debug源码 cdnjs.cloudflare.com/ajax/libs/v…

通过demo查看源码debug,div元素页面被编译为了render函数，保持一致的处理，如图，其实和使用webpack 打包编译执行是一样的，只是把#app根节点内的元素都读取出来转为render,然后再整体render之后插入到#app根节点之内。（替换掉了初始写的这些元素，并不是写了两套更新机制）