vue2-ace-editor与el-dialog使用时，无法及时更新编辑器的内容

问题

如果在el-dialog中使用vue2-ace-editor，在第二次弹出的时候，如果编辑器的内容发生了变化，但是编辑器并没有正确的更新，需要点击一下编辑器才能成功更新到。

原因

由于ace编辑器是jquery的库，它本身的库并不是根据数据驱动来设计，所以数据变化之后，编辑器不一定能正确出现，是因为库本身做了一些限制。所以，我们需要在源码上找到问题所在。

el-dialog异常

问题只有在弹框内使用，并且二次展示的时候才会出现异常。

从经验分析，vue2-ace-editor应该是正确设置到值了，但是没有更新到ace编辑器的HTML内容。

v-show的问题？

由于性能考虑，el-dialog在初始化完之后，使用的是v-show来隐藏节点，所以ace编辑器不会触发第二次mounted事件。
一起来看看是不是v-show才导致问题出现。

v-show与v-if的区别
v-if会销毁节点，而v-show只是通过css来隐藏节点。

追根溯源ACE源码：不更新的真正原因

通过一番源码阅读，终于发现了真正问题所在。
在ACE中的VirtualRenderer中的更新节点的回调函数中：$renderChanges

如果编辑器的宽度为0时，则不更新HTML内容。
由于v-show导致节点编辑器的长宽都是为0，所以才导致了编辑器的内容更新之后，但是编辑器的HTML内容并没有更新。

解决方法

1. 修改ace库的方法，去除这个编辑器宽度为0的限制。
2. 在业务组件中，使用v-if手动重置编辑器。
3. 修改vue2-ace-editor,监听编辑器的宽度变化，如果发生了变化则手动设置内容。
   这里简述下方法三，可以使用ResizeObserver来监听编辑器的offsetWidth是否发生变化，发生变化之后，重新setValue，这里我放出我二次封装的组件，大家可以参考看看。
   这个方法的缺点是：ResizeObserver在所有IE都不支持，并且这个是实验性的API，大家在业务组件使用时，需要自己根据项目进行取舍。MDN文档ResizeObserver

   // 这里需要提前引入
   let ace = require('brace');
   require('brace/theme/chrome');
   require('brace/ext/language_tools');
   // 格式化
   require('brace/snippets/json');
   require('brace/snippets/html');
   require('brace/snippets/javascript');
   require('brace/snippets/xml');
   // 引入格式文件
   require('brace/mode/html');
   require('brace/mode/json');
   require('brace/mode/javascript');
   require('brace/mode/xml');
   
   // language
   export default {
        
        
     render(h) {
        
        
       const height = this.height ? this.px(this.height) : '100%';
       const width = this.width ? this.px(this.width