Vue.js如何监听window.gtmDataObject的变化？

你用计算属性没效果的核心原因是window.gtmDataObject不是Vue的响应式对象——Vue的计算属性依赖追踪只对Vue内部的响应式数据生效，普通全局数组的push等内部修改操作，Vue根本感知不到，自然不会触发计算属性更新。

下面是几个可行的解决方案：

方案一：重写数组方法监听新增操作 #

直接包装数组的push/unshift/splice等会新增元素的方法，在方法执行时触发自定义事件，让组件可以监听：

// 保存原始方法，避免污染所有数组
const originalMethods = {
  push: Array.prototype.push,
  unshift: Array.prototype.unshift,
  splice: Array.prototype.splice
};

// 重写目标方法
function wrapArrayMethod(methodName) {
  Array.prototype[methodName] = function(...args) {
    const result = originalMethods[methodName].apply(this, args);
    // 只监听window.gtmDataObject的变化
    if (this === window.gtmDataObject) {
      // 提取新增的元素（不同方法的参数结构不同）
      let addedItems = [];
      if (methodName === 'push' || methodName === 'unshift') {
        addedItems = args;
      } else if (methodName === 'splice') {
        addedItems = args.slice(2); // splice从第三个参数开始是新增元素
      }
      // 触发自定义事件
      window.dispatchEvent(new CustomEvent('gtmDataAdded', { detail: addedItems }));
    }
    return result;
  };
}

// 对需要监听的方法进行包装
wrapArrayMethod('push');
wrapArrayMethod('unshift');
wrapArrayMethod('splice');

组件内监听事件：

export default {
  mounted() {
    this.handleGtmDataAdded = (e) => {
      console.log('新增GTM数据:', e.detail);
      // 这里写你的业务逻辑，比如更新组件状态
    };
    window.addEventListener('gtmDataAdded', this.handleGtmDataAdded);
  },
  beforeUnmount() {
    window.removeEventListener('gtmDataAdded', this.handleGtmDataAdded);
  }
};

方案二：将全局数组转为Vue响应式对象 #

如果能控制window.gtmDataObject的初始化，直接把它变成Vue的响应式对象，这样就能用Vue的watch正常监听：

Vue2 版本 #

// 在全局初始化时执行
window.gtmDataObject = Vue.observable([]);

组件内监听：

export default {
  watch: {
    'window.gtmDataObject': {
      handler(newArr) {
        console.log('数组更新:', newArr);
        // 处理业务逻辑
      },
      deep: true // 开启深度监听，捕捉数组内部元素变化
    }
  }
};

Vue3 版本 #

// 在全局初始化时执行（需要引入Vue的reactive）
import { reactive } from 'vue';
window.gtmDataObject = reactive([]);

组件内监听：

import { watch } from 'vue';

export default {
  setup() {
    watch(
      () => window.gtmDataObject,
      (newArr) => {
        console.log('数组更新:', newArr);
        // 处理业务逻辑
      },
      { deep: true }
    );
  }
};

方案三：用Proxy代理全局数组（无框架依赖） #

如果不想依赖Vue的响应式系统，用ES6的Proxy直接代理数组，拦截所有修改操作：

window.gtmDataObject = new Proxy([], {
  set(target, prop, value) {
    const isNewIndex = !isNaN(prop) && Number(prop) >= target.length;
    const result = Reflect.set(target, prop, value);
    
    // 如果是新增元素，触发事件
    if (isNewIndex) {
      window.dispatchEvent(new CustomEvent('gtmDataAdded', { detail: [value] }));
    }
    return result;
  },
  // 拦截push等方法调用
  get(target, prop) {
    if (typeof target[prop] === 'function' && ['push', 'unshift', 'splice'].includes(prop)) {
      return function(...args) {
        const result = target[prop](...args);
        // 提取新增元素
        let addedItems = [];
        if (prop === 'push' || prop === 'unshift') {
          addedItems = args;
        } else if (prop === 'splice') {
          addedItems = args.slice(2);
        }
        window.dispatchEvent(new CustomEvent('gtmDataAdded', { detail: addedItems }));
        return result;
      };
    }
    return Reflect.get(target, prop);
  }
});

组件内监听事件的代码和方案一一致。

内容的提问来源于stack exchange，提问作者Amine Chouar