Vue中Lodash报错：_未定义，但其他组件可正常使用

这问题确实有点拧巴——同一个全局工具库，别的组件用得好好的，就这个购物车组件出问题，改个不用_的简单逻辑又能正常跑。我帮你梳理几个大概率的原因和排查步骤：

1. 组件初始化时_还没全局就绪 #

虽然其他组件用_.debounce没问题，但有可能你的shoppingCart.vue加载/初始化时机更早，而全局的Underscore/Lodash还没完成引入。比如：

• 你把_的全局引入代码放在了某个异步加载的文件里，或者放在了Vue实例创建之后；
• 或者你把_挂到Vue原型上的操作（比如Vue.prototype._ = _）晚于这个组件的渲染。

排查方法：在shoppingCart.vue的created钩子加一行打印：

created() {
  console.log('当前组件的_是否存在:', _)
}

如果输出undefined，那就是全局_加载时机的问题。解决办法是把_的全局引入代码移到main.js最顶部，确保在所有组件渲染前就加载完成。

2. 方法定义时直接调用了_.debounce，初始化阶段就触发报错 #

这是最容易踩的坑！比如你可能在methods里这么写：

// 错误写法：组件初始化时就会执行_.debounce，此时_可能还没准备好
methods: {
  updateCart: _.debounce(function() {
    // 购物车更新逻辑
  }, 300)
}

而当你改成输出4的简单逻辑时，不需要调用_，所以不会报错。其他组件大概率是在方法内部才调用_.debounce，比如：

// 正确写法：只有调用方法时才会用到_
methods: {
  updateCart() {
    const debouncedUpdate = _.debounce(() => {
      // 购物车更新逻辑
    }, 300)
    debouncedUpdate()
  }
}

解决办法：把防抖函数的创建移到方法内部，或者缓存防抖函数避免重复创建：

methods: {
  updateCart() {
    this.debouncedUpdate = this.debouncedUpdate || _.debounce(() => {
      // 你的购物车逻辑
    }, 300)
    this.debouncedUpdate()
  }
}

3. 组件未独立引入_，依赖其他组件的打包引入 #

如果你的项目用了tree-shaking，其他组件里导入了_，所以打包时自动包含了Lodash/Underscore，但shoppingCart.vue里没写局部导入，全局又没挂载，就会出现“别的组件能用，这个组件不行”的情况。

解决办法：在shoppingCart.vue顶部手动局部导入：

import _ from 'lodash' // 如果用的是Lodash
// 或者 import _ from 'underscore' // 如果用的是Underscore

这样就能确保组件自己能拿到_，不依赖其他组件的引入。

4. 模板直接绑定了依赖_的方法 #

如果你的模板里直接绑定了用到_的方法（比如@click="debouncedMethod"），而这个方法是用_.debounce定义的，那么Vue解析模板时就会去初始化这个方法，此时_可能还没就绪。

排查方法：检查模板里的方法绑定，改成在方法内部处理防抖逻辑，而不是直接把防抖函数赋值给methods里的属性。

内容的提问来源于stack exchange，提问作者Philipp Mochine