vue ref的疑惑?

Question

目前有一个div

<div v-if="vis" ref="box" style="width: 500px; height: 500px;"></div>

 <button @click="fuck">点击展开</button>

    fuck() {
                this.vis = true
                console.log('refs',this.$refs)
                console.log('box的引用为',this.$refs.box)
                this.$nextTick(function() {
                    console.log('refs',this.$refs)
                    console.log('box的引用为',this.$refs.box)
                })

            }

几个疑惑:

• 在点击按钮后,this.vis = true.那么这个box也显示出来了.为什么console.log(refs)有这个属性
  但是打印console.log(refs.box)却是undefined
• 什么两次打印出的refs在形势上不太一样.(他们都有box属性),但是第一个在大括号里没有内容,第二个却有,
  是不是第一个refs是不是根本没有获取到box.但是如果没有获取到,为什么console.log(refs)展开却有这个属性
• 为什么在nextTick能完整打印出东西.在我点击后 this.vis 就为true了.此时不是已经有这个dom了么?

Answer 1

请把鼠标放到蓝色i上。他会提示你，如下值已更新。
点开的时候会重新去读此对象的值。
你可以在this.$nextTick前加个断点，再试试。

Answer 2

我认为这应该是一个时序问题，this.vis = true时后立马读取this.$refs.box，由于vue里面的代码未处理完，所以是拿不到的