{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/3769","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/3769/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/3769/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/3769/events","html_url":"https://github.com/vuejs/vue/issues/3769","id":179167739,"number":3769,"title":"When using the v-else statement will cause a memory leak ? ","user":{"login":"liming9515","id":18320052,"avatar_url":"https://avatars.githubusercontent.com/u/18320052?v=3","gravatar_id":"","url":"https://api.github.com/users/liming9515","html_url":"https://github.com/liming9515","followers_url":"https://api.github.com/users/liming9515/followers","following_url":"https://api.github.com/users/liming9515/following{/other_user}","gists_url":"https://api.github.com/users/liming9515/gists{/gist_id}","starred_url":"https://api.github.com/users/liming9515/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/liming9515/subscriptions","organizations_url":"https://api.github.com/users/liming9515/orgs","repos_url":"https://api.github.com/users/liming9515/repos","events_url":"https://api.github.com/users/liming9515/events{/privacy}","received_events_url":"https://api.github.com/users/liming9515/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/vuejs/vue/labels/need%20repro","name":"need repro","color":"eb6420"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-09-26T08:29:07Z","updated_at":"2016-09-27T06:51:27Z","closed_at":"2016-09-27T04:16:43Z","body":"> Here‘s the simple code\r\n\r\n`<table id=\"myTable\">`\r\n&nbsp;&nbsp;&nbsp;&nbsp;`<tr v-for=\"row in rows\">`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`<td v-for=\"col in cols\">`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`<div v-if=\"col.format != null\" class=\"grid-content\">`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`{{ col.format(row) }}`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`</div>`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`<div v-else  class=\"grid-content\">`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`{{ row[col.name] }}`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`</div>`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`</td>`\r\n&nbsp;&nbsp;&nbsp;&nbsp;`</tr>`\r\n`</table>`\r\n\r\n`<script type=\"text/javascript\">`\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp; `var vmm = new Vue({`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `el: \"#myTable\",`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `data: {`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`rows: [],`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`cols: []`\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` }`\r\n&nbsp;&nbsp;&nbsp;&nbsp; `});`\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;` vmm.cols = [{name: \"Field1\", format: function(row) {`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;` return \"Field1-\" + row[\"Field1\"];`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;`}}, `\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;`{name: \"Field2\"}, `\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;`{name: \"Field3\"}];`\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp; `window.setInterval(function() {`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `if(vmm.rows.length > 500)`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `{`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `vmm.rows.splice(0, 100);`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `}`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `vmm.rows.push({`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `Field1: Math.random(),`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `Field2: Math.random(),`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; `Field3: Math.random()`\r\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;  `});`\r\n&nbsp;&nbsp;&nbsp;&nbsp; `});`\r\n`</script>`\r\n\r\n> Monitor by Chrome, the number of nodes are growing all the time. But if i replace **v-else** with **v-if=\"col.format == null\"**, it will be hovering near the peak.\r\n\r\n> I'm so sorry for my poor English, if you can't understand what i means, read the following Chinese.\r\n\r\n以上代码通过Chrome监测，会发现dom节点的数量一直在增长，直到浏览器崩溃，如果将 **v-else** 替换为 **v-if=\"col.format == null\"**，则节点数量会在到达峰值之后回收一部分，然后重新达到峰值，再次回收，如此往复，浏览器不崩溃。\r\n\r\n\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/249781103","html_url":"https://github.com/vuejs/vue/issues/3769#issuecomment-249781103","issue_url":"https://api.github.com/repos/vuejs/vue/issues/3769","id":249781103,"user":{"login":"liming9515","id":18320052,"avatar_url":"https://avatars.githubusercontent.com/u/18320052?v=3","gravatar_id":"","url":"https://api.github.com/users/liming9515","html_url":"https://github.com/liming9515","followers_url":"https://api.github.com/users/liming9515/followers","following_url":"https://api.github.com/users/liming9515/following{/other_user}","gists_url":"https://api.github.com/users/liming9515/gists{/gist_id}","starred_url":"https://api.github.com/users/liming9515/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/liming9515/subscriptions","organizations_url":"https://api.github.com/users/liming9515/orgs","repos_url":"https://api.github.com/users/liming9515/repos","events_url":"https://api.github.com/users/liming9515/events{/privacy}","received_events_url":"https://api.github.com/users/liming9515/received_events","type":"User","site_admin":false},"created_at":"2016-09-27T06:51:27Z","updated_at":"2016-09-27T06:51:27Z","body":"@posva My problem very similar to this\r\nhttps://github.com/vuejs/vue/issues/2000\r\nI use vue to render a grid that have more than 10000 cells, it cost almost 8s. Is there a simple way to make it fast?"}}
{"actor":{"display_login":"liming9515"}}