无需调用'this'使用库函数？全局导入lodash后组件调用.size(x)方法

嘿，我来帮你搞定这两个问题：

1. 是否可以不调用this来使用库函数？ #

当然没问题！绝大多数像Lodash这样的工具库，其核心方法都是纯函数，本身就不依赖this上下文。只有当你特意把库方法挂载到某个对象（比如Vue实例的this上）时，才需要用this来访问。如果直接导入库、或者把方法放到全局作用域，完全可以跳过this直接调用。

举个例子，如果你在组件里直接导入：

import { size } from 'lodash'
console.log(size([1,2,3])) // 直接调用，不需要this

这样就完全不用碰this。

2. 如何在main.js导入Lodash后，组件内直接调用size(x)而非this.size()？ #

要实现全局可用、不用每个组件单独导入，有几种实用方案，分场景给你说：

方案一：用构建工具的全局注入（推荐，无全局污染） #

如果你用Vue CLI（基于Webpack）或者Vite，可以通过配置让构建工具自动注入size方法，不用手动import：

Vue CLI/Webpack 配置：

在项目根目录的vue.config.js里添加：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        size: ['lodash', 'size'] // 告诉Webpack，遇到size就自动导入lodash的size方法
      })
    ]
  }
}

配置完重启项目，之后任何组件里都能直接写size([1,2,3])，Webpack会帮你处理导入逻辑，既不用this，也不用手动import。

Vite 配置：

Vite可以用@rollup/plugin-inject来实现类似效果，先安装插件：

npm install @rollup/plugin-inject --save-dev

然后在vite.config.js里配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    vue(),
    inject({
      size: ['lodash-es', 'size']
    })
  ]
})

同样，配置后就能在组件里直接调用size(x)。

方案二：挂载到全局window对象（简单但不推荐） #

如果你的项目比较小，不在乎全局作用域污染，可以直接把size挂到window上：
在main.js里：

import { size } from 'lodash'
window.size = size

之后所有组件都能直接调用size(x)，缺点是全局变量容易和其他库或自定义变量冲突，大型项目不建议用。

方案三：Vue3全局属性+全局混入（需配合this，但接近需求） #

如果是Vue3项目，想通过官方方式挂载，可先把size放到全局属性：

import { createApp } from 'vue'
import { size } from 'lodash'
const app = createApp(App)
app.config.globalProperties.size = size

但这样还是需要用this.size(x)调用。如果想彻底不用this，可以配合全局混入，在setup里把全局属性解构出来：

import { getCurrentInstance } from 'vue'

app.mixin({
  setup() {
    const { size } = getCurrentInstance().appContext.config.globalProperties
    return { size }
  }
})

这样每个组件的setup里都会自动有size方法，直接调用就行，但相比构建工具注入还是麻烦一点。

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