nextTick的使用

桃子不吃李子2025-10-24 22:55

vue 复制代码

<el-tree
	ref="treeRef"
    style="max-width: 600px"
    :data="permissionsData"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2]"
    :default-checked-keys="defaultCheckedKeys"
    :props="{ children: 'children', label: 'label'}"
 />

【业务逻辑】：点击 table 操作栏中的编辑按钮，出现编辑权限的弹框

js 复制代码

const treeRef = ref()
const formData = reactive({
  id: '',
  name: '',
  permissions: ''
})
const dialogVisible = ref(false)
// 打开弹框，编辑权限
const editMenu = ({ id, name, permission }) => {      
  dialogVisible.value = true
  Object.assign(formData, { id, name, permission })
  treeRef.value.setCheckedKeys(permission)
}

运行的时候，报错：

因为 js 是单线程运作的，如果采用同步更新的策略，对属性值的每一次修改，都可能会触发虚拟 DOM 的计算和真实 DOM 的渲染，非常影响性能。所以 vue 引入了异步更新，会将要更新的副作用（虚拟 DOM diff、patch）放到一个队列中，等当前调用栈清空且 DOM 渲染完毕之后，再执行 nextTick 的回调。
dialogVisible.value = true 只是改了数据，此时 Vue 还没将 <el-dialog> 的真实 DOM 渲染出来， treeRef.value 也就为 undefined，导致出现上述报错。

因此，修改 formData 和获取 treeRef.value 的操作需要放到下次一 DOM 渲染完成之后执行：

js 复制代码

const editMenu = async ({ id, name, permission }) => {      
  dialogVisible.value = true
  await nextTick()		// 将下面的操作延迟到本轮DOM批量更新之后执行
  Object.assign(formData, { id, name, permission })
  treeRef.value.setCheckedKeys(permission)
}