Vnode是如何产生的？

本文主要是介绍Vnode是如何产生的？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

源码 流程图

源码解读

Vue.js2.0中有两种生成方式：第一种是直接在Vue对象的option中添加render字段；第二种是像Vue.js 1.x版本那样写一个模板或者指定一个el根元素，它会首先转换成模板，经过HTMI语法解析器生成一个 ast 抽象语法树，对语法树做优化，然后把语法树转换成代码片段，最后通过代码片段生成function添加到option的render字段中。
在整个过程中，特别值得一提的是ast语法树优化的过程，它主要做了两件事情：

1. 会检测出静态的class名和attributes，这样它们在初始化渲染之后就永远都不会再被比
   对了。
2. 会检测出最大的静态子树（就是不需要动态性的子树）并且从渲染函数中萃取出来。这
   样在每次重渲染时，它就会直接重用完全相同的Vnode，同时跳过比对。
   接下来我们可以通过一段简单的代码看一下编译后的渲染函数。代码示例如下：

<div id="app">
<h1>Hello {{who}}</h1>
</div><script>
new Vue({el:'#app',data:{who:'DDFE'}
})
</script>

经过一系列的编译操作之后生成的render方法。示例如下：

with (this) (
return _h(_e('div',
{staticAttrs;{"id":"app"}}),
[_h(_e('h1'),
）]
[("Hello "+ _s(who))]
})

这篇关于Vnode是如何产生的？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---