vue和js文件相互监听DOM内容变化

前言：vue文件引入一个js文件，js中的按钮控制vue  input弹框的出现，vue中的弹框输入的内容需要存入js文件。（ps:不要问为何不都用vue，设计如此），那么现在需要在vue中获取js控制弹框显隐的值，需要在js中获取vue中input后的内容。

实现： 先介绍一下MutationObserver

MutationObserver 是一个可以监听DOM结构变化的接口。

官方示例：

//选择一个需要观察的节点
var targetNode = document.getElementById('some-id');

// 设置observer的配置选项
var config = { attributes: true, childList: true, subtree: true };

// 当节点发生变化时的需要执行的函数
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个observer示例与回调函数相关联
var observer = new MutationObserver(callback);

//使用配置文件对目标节点进行观测
observer.observe(targetNode, config);

// 停止观测
observer.disconnect();

 那么根据案例代码，实现我们的vue  和 js demo

test.vue文件如下：

<template>
    <div>
        <div id="box111"></div>
        <div v-show="isShow">
            输入内容: <input type="text" name="fname" v-model='inputText'><br>
            <input type="submit" value="提交" @click="showTextHandler">
        </div>
        <div id="showText11">{{showText}}</div>
    </div>
</template>
<script>
  import init from '../utils/test'
  export default {
    name: 'index',
    data() {
      return {
        isShow: false,
        inputText: '',
        showText: ''
      }
    },
    mounted() {
      init()

      // 选择将观察突变的节点
      var targetNode = document.getElementById('showdiv');
      // 观察者的选项(要观察哪些突变)
      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData:true,
        characterDataOldValue:true,
        attributeOldValue:true
      };
      // 当观察到突变时执行的回调函数
      var callback = (mutationsList) => {
        mutationsList.forEach((item, index) => {
          console.log(item);
          if (item.type == 'childList') {
            console.log('获取到js变化：', item.target.innerHTML);
            this.isShow = item.target.innerHTML == 'show' ? true : false
          }
        });
      };
      // 创建一个链接到回调函数的观察者实例
      var observer = new MutationObserver(callback);
      // 开始观察已配置突变的目标节点
      observer.observe(targetNode, config);
    },
    methods: {
      showTextHandler() {
        document.getElementById('showText11').innerText = this.inputText//监听到的type类型是childList
        // this.showText = this.inputText  //这种方式监听到的type是characterData
      }
    }
  }
</script>

test.js文件如下：

export default function init() {
  let html = ''
  html += `<button id='btn11'>按钮</button>`
  html += `<div id='showdiv'></div>`
  document.getElementById('box111').innerHTML = html
  let btn = document.getElementById('btn11')
  let showdiv = document.getElementById('showdiv')

  btn.addEventListener('click', () => {
    console.log(showdiv.innerText);
    if(showdiv.innerText == 'show'){
      showdiv.innerText = 'hide'
    }else {
      showdiv.innerText = 'show'
    }
  })


  // 选择将观察突变的节点
  var targetNode1 = document.getElementById('showText11');
  // 观察者的选项(要观察哪些突变)
  var config1 = {
    attributes: true,
    childList: true,
    subtree: true,
    characterData:true,
    characterDataOldValue:true,
    attributeOldValue:true
  };
  // 当观察到突变时执行的回调函数
  var callback1 = (mutationsList) => {
    mutationsList.forEach((item, index) => {
      console.log(item);
      if(item.type =='childList'){
        console.log("获取到vue内容变化：",item.target.innerHTML);
      }
    });
  };
  // 创建一个链接到回调函数的观察者实例
  var observer1 = new MutationObserver(callback1);
  // 开始观察已配置突变的目标节点
  observer1.observe(targetNode1, config1);

}