Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined”

---

理解：default-checked-keys()以及this.$refs.tree.setCheckedKeys()的使用却别

---

报错信息：

报错场景：

使用axios发送异步请求获得角色的所有权限：

将权限赋值到一个数组中：

这里我的想法是在弹出会话框前使用 this.$refs.tree.setCheckedKeys(this.functionList); 勾选上角色所有权限

效果图：

解决过程：

一开始我使用的是 ：:default-checked-keys="functionList"

后来发现第一次可以选择对应的角色权限，但是点击别的角色的时候，弹框弹出来的还是第一次所选的角色权限，经过检测axios得到的数据是没有问题的，我想的是可能因为:default-checked-keys="functionList"是只能一次赋值。

后来就改用：this.$refs.tree.setCheckedKeys(this.functionList);
但是无论放在什么地方这个都会报错：TypeError: this.$refs.tree is undefined

最后经过不断努力与分析：
使用如下方法：

this.$nextTick(() => {
	this.$refs.tree.setCheckedKeys(this.functionList);
});

如图：

总结：

• 原因

vue 官网中ref 下有一段话  "关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们
 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

也就是说 ref 只有等页面加载完成好之后你才能调用 this.$refs ，如果你使用v-if 、v-for渲染页面的话，
那么在刚开始页面没没渲染之前你是拿不到this.$refs 的，所以要等到页面渲染之后拿才可以

• this.$nextTick()的理解;

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。