Vuejs 不能在模板中使用 lodash 但它适用于代码答案

【问题标题】：Vuejs can't use lodash inside template but it works on codeVuejs 不能在模板中使用 lodash 但它适用于代码
【发布时间】：2020-05-27 09:31:30
【问题描述】：

我已经在全球范围内导入了 lodash：

window._ = require('lodash'); // app.js

当我在方法中使用它时，它工作正常。但是当我尝试在模板中使用它时：

{{_.get(user, 'address.name')}}

显示未定义的错误：

Property or method "_" is not defined on the instance but referenced during render

为什么会这样？我可以重构创建一个新变量并在代码中分配值，它会起作用，但我也想直接在模板上使用它。

【问题讨论】：

你尝试改用 {{window._.get}} 吗？
我建议不要直接在模板中使用 lodash，而是使用计算属性或组件数据。您的计算属性可以简单地返回 _.get(this.user, 'address.name')
计算属性在处理特定数据时非常有用，如果您想要动态方法，您可以创建一个使用 lodash 的方法，另一种解决方案是尝试使用某些 lodash 方法创建一个全局混合将相同的方法传递给应用中的每个组件，可能会派上用场。

【解决方案1】：

扩展我的评论：我通常不鼓励在 VueJS 模板中使用第三方 util/helper 方法。当然，这是个人选择，但让 VueJS 直接处理渲染要简单得多（并且还可以防止未来可能出现的反应性问题）。因此，您可以简单地使用计算属性（或方法，如果您需要传递参数）来生成插入到模板中的字符串。

例子：

computed: {
  addressName() {
    return _.get(this.user, 'address.name');
  }
}

然后，在您的模板中，您可以简单地使用{{ addressName }} 来呈现字符串。如果您需要更灵活、更抽象的动态使用，您可以使用方法来代替。例如，如果您的路径是动态的，那么您可以创建一个方法，使用提供的 path 参数从 this.user 检索数据：

methods: {
  userData(path) {
    return _.get(this.user, path);
  }
}

在您的模板中，您可以简单地使用{{ userData('address.name') }}。

【讨论】：

【解决方案2】：

这可能是因为渲染（所以属性“_”的调用）是在他的实例化之前完成的。

在您的情况下，您可能必须在渲染之前调用的 created 生命周期回调中设置 window._。

但我的建议是将其设置在组件的“数据”属性中，甚至只导入和设置您需要的功能。

例如：

import clone from 'lodash/clone'

【讨论】：