vue延迟渲染组件_vue数组修改的渲染性能问题

最近用vue做一个小东西，发现了一个奇怪的现象，当模板使用数组进行v-if判断时，如果修改数组的值，页面渲染会明显有延迟，示例代码如下：

这个更多显示反应有延迟

{ {v.name}}

export default {

data() {

return {

list:[{'id':0,'name':'a'},{'id':1,'name':'b'},{'id':2,'name':'c'}],

more: [false,false,false]

}

},

methods: {

show_more(id) {

this.more[id] = true; //此处代码执行完毕约1s后页面才有反应

console.log('set done!');

}

},

}

可以看到，代码逻辑非常简单，通过console.log日志能看到点击瞬间就执行完毕了，但是延迟将近1s后more区域才显示，把v-if换成v-show没有变化，把more变量改为非数组变量就能正常瞬间显示。

经过反复测试，发现vue的虚拟dom渲染在数组组件更新的地方代码逻辑为：

vue/src/core