vue组件异步渲染
vue组件是异步渲染的
汇总data的修改,一次性更新视图
减少dom的操作次数,提高性能
<template> <div id="app"> <ul ref="ul1"> <li v-for="(item, index) in list" :key="index"> {{item}} </li> </ul> <button @click="addItem">添加一项</button> </div> </template> <script> export default { name: 'app', data() { return { list: ['a', 'b', 'c'] } }, methods: { addItem() { this.list.push(`${Date.now()}`) this.list.push(`${Date.now()}`) this.list.push(`${Date.now()}`) // 1. 异步渲染,$nextTick 待 DOM 渲染完再回调 // 3. 页面渲染时会将 data 的修改做整合,多次 data 修改只会渲染一次 this.$nextTick(() => { // 获取 DOM 元素 const ulElem = this.$refs.ul1 // 如果没加$nextTick,点击第一次,li的节点是3个(为何不是6个),因为dom是异步渲染,data数据改变不会立刻渲染 console.log( ulElem.childNodes.length ) }) } } } </script>
因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑,vue 会在本轮数据更新后,再去异步更新视图。