nextTick的原理

在这里插入图片描述
开发中有这么一个需求，回显的适合，el-tree的检查严格标志属性更新为true。当更新完成后，又要改为false。还原。


<template><div><el-tree:data="data"show-checkbox:check-strictly="checkStrictly"default-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"></el-tree></div>
</template><script>
export default {methods: {async initData() {let type = "edit";if (type == "edit") {this.checkStrictly = true; //回显的时候设置为父子之间 this.$nextTick(() => {// 这里相当于在检查严格标志设置后再一次更新this.$refs.tree.setCheckedKeys([3, 7]);});this.$nextTick(() => {//在赋予默认值后，再次更新。this.checkStrictly = false;});}},},data() {return {checkStrictly: false, //没有界限，就是父子是一家data: [{id: 1,label: "一级 1",children: [{id: 4,label: "二级 1-1",children: [{id: 9,label: "三级 1-1-1",},{id: 10,label: "三级 1-1-2",},],},],},{id: 2,label: "一级 2",children: [{id: 5,label: "二级 2-1",},{id: 6,label: "二级 2-2",},],},{id: 3,label: "一级 3",children: [{id: 7,label: "二级 3-1",},{id: 8,label: "二级 3-2",},],},],defaultProps: {children: "children",label: "label",},};},mounted() {console.log("创建后");this.initData();},
};
</script>