vue v-if v-show

1

使用 v-if 指令时，元素的插入和移除是动态的，当元素被移除时，与元素相关的对象和事件处理程序也会被销毁，包括 ACE 编辑器对象。因此，当再次插入元素时，相关的对象和事件处理程序需要重新初始化。
使用 v-show 可以在编辑器对象被创建后一直保持元素的显示状态，不会出现对象和事件处理程序被销毁的情况，因此可以正常工作。

2 v-if 导致错误 浏览器终端提醒没有dom 元素 --> 下面代码用v-show 可以

 

    
 
methods: {

    showEditor() {
      if (this.editorVisible) {
        // 如果编辑器已经打开，则关闭编辑器
        this.editorVisible = false;
        this.editor.destroy();
        this.editor = null;
      } else {
        // 如果编辑器未打开，则打开编辑器
        if (this.editor) {
          // 如果编辑器已经存在，则直接显示编辑器
          this.editorVisible = true;
          this.editor.focus();
        } else {
          // 如果编辑器不存在，则创建编辑器并显示
          const editor = ace.edit('editor');
          editor.setOptions({
            fontSize: '8pt',
          });
          editor.getSession().setMode('ace/mode/javascript');
          editor.setTheme('ace/theme/twilight');
          editor.setValue(this.code);
          editor.clearSelection();
          editor.focus();
          editor.$blockScrolling = Infinity; // 添加这句代码
          this.editor = editor;
          this.editorVisible = true;
        }
      }
    },

3 解决上面代码 使用v-if

Vue的v-if和v-show的区别是，v-if是按需渲染组件并且在切换时销毁和重新创建组件实例，而v-show是根据条件控制元素的显示和隐藏的。因此，在使用v-if时，如果元素在初始渲染时没有被渲染，那么在接下来的操作中就可能会出现找不到元素的情况。

在你的代码中，当使用v-show时，元素会在初始渲染时就被渲染出来，因此ace.edit可以找到div #editor节点。但是，当你使用v-if时，div #editor元素在初始渲染时并没有被渲染出来，而是在showEditor方法中根据编辑器是否存在来创建或销毁元素。这个时候，如果你在创建编辑器之前就调用了ace.edit方法，就会报错找不到div #editor元素。

解决方法有两种：

使用v-show而不是v-if，因为v-show会在初始渲染时就将元素渲染出来。
将ace.edit方法的调用放在div #editor元素被创建后执行，可以在mounted钩子函数中添加一个this.$nextTick()方法来确保元素已经被渲染出来

data() {
  return {
    editorVisible: false,
    chart: null,
    editor: null,
    code: 'function funcSelfIndex() {\n  // 在这里输入自定义函数的代码\n\n\n\n\n\n\n\n\n}',
  };
},
mounted() {
  this.showEditor();
},
methods: {
  showEditor() {
    if (this.editorVisible) {
      this.editorVisible = false;
      if (this.editor) {
        this.editor.destroy();
        this.editor = null;
      }
    } else {
      this.editorVisible = true;
      if (!this.editor) {
        this.$nextTick(() => {
          const editor = ace.edit('editor');
          editor.setOptions({ fontSize: '8pt' });
          editor.getSession().setMode('ace/mode/javascript');
          editor.setTheme('ace/theme/twilight');
          editor.setValue(this.code);
          editor.clearSelection();
          editor.focus();
          editor.$blockScrolling = Infinity;
          this.editor = editor;
        });
      } else {
        this.editor.focus();
      }
    }
  },
}

4 总结

dom元素重新创建渲染,这个过程需要时间.导致代码执行时,
没有等待dom元素重新创建好就执行之后的代码
所以 v-if 重新创建dom元素,需要时间,并且代码执行时不等待dom元素是否创建成功
就执行之后的代码;导致可能找不到dom元素