关于 vue 生命周期 使用 element-ui Tree 组件的问题

Question

vue 和 element-ui 的版本分别是"vue": "^2.2.6"，"element-ui": "^1.2.8"

现在的问题是我使用 elementui 的 tree 组件，组件样式如下：

这个组件他有几个方法是用代码去设置节点的勾选：

我现在的目的是页面刷新后检测 sessionStorage 中我保存勾选的节点的值（懒得用 vuex），这一步是没问题的，可以读取我刷新前勾选的节点的数据，sessionStorage.getItem('defCheckedKeys')，然后调用 elementui 提供的setCheckedKeys方法去勾选节点，但是当我紧接着再去使用getCheckedNodes方法的时候返回的值就是空的(按理来说应该返回上一步我用setCheckedKeys方法勾选的节点的数据)，生命周期钩子我用的 mounted。代码如下：

        mounted:function(){
            //调用自动勾选节点函数
            this.getDefCheckedKeys()
        },
        methods:{
            //是否需要自动勾上节点
            getDefCheckedKeys(){
                debugger
                //如果sessionStorage中存储有defCheckedKeys属性则根据属性值自动勾上tree组件
                if (sessionStorage.getItem('defCheckedKeys')) {
                    console.log('defCheckedKeys:',JSON.parse(sessionStorage.getItem('defCheckedKeys')))
                    //给tree组件设置勾选的节点
                    this.$refs.tree.setCheckedKeys(JSON.parse(sessionStorage.getItem('defCheckedKeys')))                  
                    this.treeInfo()
                }
            },
            //根据勾选的节点提供数据
            treeInfo(){                             
                this.tree = this.$refs.tree.getCheckedNodes()
                if (this.tree.length === 0) {
                    this.editableTabs = []
                    //子传递数据给父组件
                    this.$emit('editableTabs', this.editableTabs)
                    sessionStorage.removeItem('defCheckedKeys')
                }
                //若 tree 组件中勾选了内容
                else {
                ...

如果我用 updated 的钩子的话，我想要的效果可以实现，只是 treeInfo 方法会调用两遍，由于对数据的处理比较多，对性能有些许影响。

后来我尝试了一下，在页面上加两个 button，各自 click 事件绑定的方法分别是testtesttest，testtesttest2，方法如下：

            testtesttest() {
                console.log(this.$refs)
                this.$refs.tree.setCheckedKeys([
                    "593e51144f4ff72143521fec"
                    , "593faba39242337cb406e810"
                    , "5954b5ca60185336a1e32c25"
                    , "5955f9374e234e8675d02be7"
                    , "5962ee1116f80eea28151551"])
            },
            testtesttest2(){
                console.log('this.$refs.tree.getCheckedNodes():',this.$refs.tree.getCheckedNodes())
                console.log('this.$refs.tree.getCheckedKeys():',this.$refs.tree.getCheckedKeys())
            },

在页面加载完后我手动去点击两个 button，返回的结果都是没问题的：

如果把这两个方法放到 mounted 钩子里自动执行结果就是：

放在 updated 钩子里就是有结果但是执行两遍：

请问这种情况应该怎么办，我觉得问题就是处在钩子调用中，如果页面加载完我手动点就是没问题的，vue 的生命周期我也仔细去看了，也没什么头绪，，，，

小弟这里先行谢过~

Answer 1

这样调用treeInfo()试试：

this.$nextTick(() =>{
    this.treeInfo()
})

Answer 2

你好 请问你这个问题解决了吗， 我现在也遇到一样的问题 setCheckedKeys之后 getCheckedNodes()不到