Skip to content

Instantly share code, notes, and snippets.

@LiuJi-Jim
Last active May 12, 2016 03:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LiuJi-Jim/e12b9df4c5bb5022cbe8f9308287e4e7 to your computer and use it in GitHub Desktop.
Save LiuJi-Jim/e12b9df4c5bb5022cbe8f9308287e4e7 to your computer and use it in GitHub Desktop.
vue staticSubTree
<div id="counter-app">
<h1>Count: {{count}}</h1>
<h2>I will never change</h2> <!-- 这个节点是“纯静态子树”,不必更新,事实上它的确中了全等逻辑 -->
<button @click="count++">+1</button> <!-- 这个节点(看起来)也是“纯静态子树”,但它没有中全等逻辑 -->
<!-- 不过可以理解,因为它有一个event绑定(但看起来不会影响它的“纯静态”性质) -->
<!-- 另外,因为HTML标签之间的换行和空格带来的一些空文本节点也纷纷没有中全等逻辑 -->
</div>
<script>
var vm = new Vue({
el: '#counter-app',
data: {
count: 0
}
})
</script>
@yyx990803
Copy link

赞,确实可以进一步优化!
可以检测 inline statement 的事件绑定看做静态。
空文本节点可以干脆全部用同一个 vnode...

@yyx990803
Copy link

空文本节点确实提醒我了,之前专门搞了个 preserveWhitespace 选项,就是顾虑空文本节点的性能影响。现在全部用同一个 vnode 基本可以无视了...

@yinheli
Copy link

yinheli commented May 12, 2016

赞~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment