vue中监听window某个属性被添加或值的变化

C+ 安口木2025-10-14 23:29

vue项目中假如你需要在index.html中获取某个异步数据，

假如你在项目其他地方如main.js或store.js添加了数据

js 复制代码

// main.js
window.__CONFIG__ = featchData //异步数据

Promise 方式

js 复制代码

function waitForHXConfig(timeout = 2000) {
  return new Promise((resolve, reject) => {
    if (window.__CONFIG__ !== undefined) {
      return resolve(window.__CONFIG__);
    }
    
    const interval = setInterval(() => {
      if (window.__CONFIG__ !== undefined) {
        clearInterval(interval);
        resolve(window.__CONFIG__);
      }
    }, 300);
    
    setTimeout(() => {
      clearInterval(interval);
      reject(new Error('等待 __CONFIG__ 超时'));
    }, timeout);
  });
}

// 使用示例
waitForConfig().then(config => {
  console.log('🎯 监听到 __CONFIG__:', config);
  // 这里写你的业务代码
});

回调函数方式

javascript 复制代码

<script>
function onConfigReady(callback) {
  const check = () => {
    if (window.__CONFIG__ !== undefined) {
      callback(window.__CONFIG__);
    } else {
      setTimeout(check, 100);
    }
  };
  
  check(); 
}

// 使用
onConfigReady(config => {
  console.log('__CONFIG__ 已就绪:', config);
});
<script>