警告 [Deprecation]Listener added for a synchronous 'DOMNodeInserted' DOM Mutation

4,752 阅读1分钟
警告 [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

原因: node包 vue-quill-editor 引用的 quill包内部问题

处理方案

  1. 找到该包blots下scroll.js文件,搜索 DOMNodeInserted 找到
// Some reason fixes composition issues with character languages in Windows/Chrome, Safari
this.domNode.addEventListener('DOMNodeInserted', function() {});

2.任意选择一种替换上述代码,并保存

/* 1.
      let observer = new MutationObserver(function (mutations) {
        //mutations.forEach(function (mutation) {
          // Обработка изменений в DOM
          //console.log(mutation);
        //});
      });

      // Настройка на отслеживание изменений в документе
      let observerConfig = {childList: true, subtree: true};
      observer.observe(_this.domNode, observerConfig);
    */
    /* 2.
      var observer = new MutationObserver(function () {});
      observer.observe(_this.domNode, { childList: true });
   */

3.重新打包,直接从git上获取的包文件不支持在windows系统上打包,需要调整打包命令

"build:webpack": "webpack --config _develop/webpack.config.js & (rm dist/quill.core dist/quill.bubble dist/quill.snow || del /Q /F ".\dist\quill.core" ".\dist\quill.bubble" ".\dist\quill.snow")",

4.运行 npm run build:webpack 将重新生成dist文件,重启项目即可

补充:

1.过程中可能会发现找不到webpack.config.js文件,原因有二,其一是确实没有,去git上获取,其二是3的原因

2.npm下载bill包的依赖时会提示node版本不对,请根据提示重新按照node包。如果使用nvm下载的,则有概率没有同时下载npm,此时也根据nvm的提示去下载。

3.关于2.中的npm下载后的调整会写在我另外的记录中

 

参考:

  1. github.com/quilljs/qui…

  2. github.com/vueup/vue-q…