vue中$nextTick应用场景

Vue中$nextTick的理解

Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行，也就是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，能够获取更新后的DOM。简单来说就是当数据更新时，在DOM中渲染完成后，执行回调函数。

 应用场景

需求：点击按钮（permissionSet）同时显示抽屉和获取绑定在el-tree组件上的ref，渲染默认选中的数据

permissionSet(item) {
                    this.permissionShow = true
                    let checkeds = ['oper']
                    console.log(this.$refs.pTree)
                    this.$refs.pTree.setCheckedKeys(checkeds)
                }

这种写法是拿不到绑定的ref，因为vue是在等待整个事件结束后渲染DOM，无法等待抽屉渲染完成再获取ref，渲染默认选中的数据

解决方案：

使用$nextTick方法，等待渲染完成后获取ref，再次渲染数据。

permissionSet(item) {
                    this.permissionShow = true
                    let checkeds = ['oper']
                    this.$nextTick(() => {
                        console.log(this.$refs.pTree)
                        this.$refs.pTree.setCheckedKeys(checkeds)
                    })
                }