Vue无法更新data数据排查

1. 起因

上个星期在做项目里的一个类似modal组件，撇开所有内容和布局方面的需求，modal组件的基本要求就是显示和隐藏。不说其它，先上代码如下：

父组件

子组件

2. 问题

这是一个结构非常简单的组件，例子中也就一个主页面的父组件和一个子的模态框组件。通过visible控制模态框的显示和隐藏，这里通过.sync语法糖来使得数据双向绑定。一切就绪，点击父组件中的显示按钮，模态框正常弹出全屏覆盖，但问题来了，点击关闭按钮时却无法关闭模态框，这让我很费解，于是开始了下面的猜想和排查。

3. 排查

这里我怀疑以下两点出了问题：

• 子组件关闭按钮事件没有触发
• 双向绑定失效

子组件关闭按钮事件没有触发，这个问题不难查，在close方法中插入以下代码

close() {
    console.info('in');    //in
    this.$emit('update:visible', false);
}

运行结果显示是有打印出in的，证明该事件方法有被触发到，那么问题就是第二个了。
双向绑定失效，这个指的是数据通过props传入子组件，如例子中的visible，且在变量后面加上.sync修饰符以达到双向绑定的目的（Vue官网有解释sync）。这里我怀疑是双向绑定失效导致的数据没有更新，打开Vue DevTools，定位到当前组件，当我点击关闭按时发现父组件的visible变量并没有更新到，依然还是处于true的状态。于是，我觉得这个猜测可能是正确的，便开始在网上查找相关的资料，发现在vue的issue里有过这个问题，但查阅发现没有什么特别的解决方法，有人提到尝试写成非语法糖的形式，即如下：

//父组件

但是，当我更新代码后发现还是没能解决这个问题，模态框依然无法关闭，我开始有点慌了。喝杯水冷静下来，我觉得得换一种思路，既然无法解决这个双向绑定的问题，那么就不要双向绑定试下，我尝试不把弹窗写成组件，而是把它嵌入到父组件中尝试（这不是一个好的选择，然而要赶时间不得已的处置），于是把代码改成如下

//父组件，直接嵌入弹窗代码

    

        
        modal title
    

    

抱着不得已的心情更新了代码，点击关闭发现依然无法解决这个问题，整个人都不好了，我再次喝杯水冷静下来，希望能看出究竟哪里出了问题。查看Vue的官网文档，里面讲双向绑定不是真的数据双向绑定，而是一种用update事件去更新的父组件值的做法而已。于是我回到一开始的代码，打开Vue DevTools，查看最上面的事件触发记录器

事件触发记录

再次点击关闭按钮，这时候我发现事件记录加多了一条，这证明双向绑定是生效的，只不过由于某种原因值没有改变或是改变了两次。但代码很简单，没有多余的改变状态的事件方法了。事情再次没有进展。

4. 解决

做了一下午卡在这个问题上，当自己实在想不到什么头绪时，我觉得还是得求助下旁人，于是我去请假了我的小伙伴。跟同事描述了这件事情，也展示了代码给他看，他看完我的操作后提出的问题基本和我一开始想的一致，但是他说到一点我没有去怀疑的事情，就是事件冒泡，他的想法很简单，就是肯定有触发到改变变量的事件方法。一开始我是说不可能的，没有点击到怎么会触发事件，但没办法，其它的方法都试过了，我便开始尝试将唯一一个visible=true的事件设定成自身触发，如下

//父组件，触发点击方法加入修饰符.self

更新代码后，发现成功关闭了！看来问题是出在了这里，其实换个念头想这事情就说得通了，子组件嵌套在父组件中，点击事件自然会往上冒泡，最后被上级的点击事件捕获。我们可以稍微修改下代码验证猜想

//父组件

当我们尝试关闭子组件的显示时，可以发现控制台打印了touch，这就证明了关闭的时候事件往上冒泡触发到了父组件的click事件，导致值改了两次。最后，我想说的是，不要一开始就把问题想得太过于复杂了[捂脸笑]