是的!Vue 2.0 发布了! 源代码仓库在此
首先,当我第一次看到 Vue 2.0 的真面目的时候,我的内心是非常激动的
Demo
来个简单的 demo,首先把 dist/vue.js
导入到一个空白的网页里,然后写:
当然,在大家阅读下面所有的内容之前,先想象一下,这是一个运行时 min+gzip 后只有 12kb 大小的库
<script src="./dist/vue.js"></script>
<div id="app">
Hello {{who}}
</div>
<script>
new Vue({
el: '#app',
data: {who: 'Vue'}
})
</script>
你将看到 "Hello Vue"
然后再看一个神奇的:
<script src="./dist/vue.js"></script>
<div id="app"></div>
<script>
new Vue({
el: '#app',
render: function () {
with (this) {
__h__('div',
{staticAttrs:{"id":"app"}},
[("\n Hello "+__toString__(who)+"\n")],
''
)
}
}
data: {who: 'Vue'}
})
</script>
这个是 compile 过后的格式,大家会发现首先 #app
下不需要写模板了,然后 <script>
里多了一个 render
字段,Vue 在运行时其实是会把模板内容先转换成渲染方法存入 render
字段,然后再执行,如果发现 render
已经存在,就跳过模板解析过程直接渲染。所以在 Vue 2.0 中写一段模板和写一个 render
option 是等价的。为什么要这样设计,稍后会我们会涉及到。