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) : '100%';
       return h('div', {
         attrs: {
           style: `height: ${height}; width: ${width}`,
         },
         ref: 'editor',
       });
     },
   
     props: {
       value: {
         type: String,
         default: '',
       },
       lang: true,
       theme: String,
       height: true,
       width: true,
       options: Object,
       readOnly: false,
     },
   
     data() {
       return {
         editor: null,
         contentBackup: '',
       };
     },
     watch: {
       readOnly: {
         immediate: false,
         handler(v) {
           this.editor.setReadOnly(v);
         },
       },
       value(val) {
         if (this.contentBackup !== val) {
           this.editor.setValue(val, 1);
           this.contentBackup = val;
         }
       },
       theme(newTheme) {
         this.editor.setTheme(`ace/theme/${newTheme}`);
       },
       lang(newLang) {
         this.editor
           .getSession()
           .setMode(typeof newLang === 'string' ? `ace/mode/${newLang}` : newLang);
       },
       options(newOption) {
         this.editor.setOptions(newOption);
       },
       height() {
         this.$nextTick(() => {
           this.editor.resize();
         });
       },
       width() {
         this.$nextTick(() => {
           this.editor.resize();
         });
       },
   
     },
     beforeDestroy() {
       this.editor.destroy();
       this.editor.container.remove();
     },
     mounted() {
       if (!ace) {
         ace = window.ace;
       }
       const vm = this;
   
       vm.editor = ace.edit(this.$el);
   
       const { editor } = vm;
       editor.$blockScrolling = Infinity;
       this.$emit('init', editor);
       this.setLang();
       this.setTheme();
   
       this.contentBackup = this.value;
   
       editor.on('change', () => {
         const content = editor.getValue();
         vm.$emit('input', content);
         vm.contentBackup = content;
       });
   	// 监听事件
       if (this.$refs.editor) {
         const observe = new ResizeObserver((_el) => {
           const { target } = _el[0];
           if (target && target.offsetWidth) {
             this.editor.resize();
           }
         });
         observe.observe(this.$refs.editor);
       }
   
       if (vm.options) editor.setOptions(vm.options);
   
       this.$emit('input', vm.textFormat(vm.value));
       if (vm.value) editor.setValue(vm.value, 1);
       vm.editor.setReadOnly(vm.readOnly);
     },
     methods: {
       px(n) {
         if (/^\d*$/.test(n)) {
           return `${n}px`;
         }
         return n;
       },
       setLang() {
         const { editor } = this;
         const lang = this.lang || 'text';
         editor.getSession().setMode(typeof lang === 'string' ? `ace/mode/${lang}` : lang);
       },
       setTheme() {
         const theme = this.theme || 'chrome';
         this.editor.setTheme(`ace/theme/${theme}`);
       },
     },
   };