Question

当我尝试在Vue模板文件中的lodash内调用momentjs或{{ mustache syntax }}等库时，我不断收到'undefined property'错误，即使它们已被绑定window对象。

为了解决这个问题，我将库导入到我的组件中，然后在计算属性中返回对象，如：

import _ from 'lodash';

export default {
    computed: {
        _() { return _; }
    }
}

这是解决此问题的好方法吗？推荐的方法是什么？通过计算属性而不是方法处理它有什么缺点吗？

Answer 1

基本上，是的，创建computed属性是可行的方法。

但是你有一些替代方法可以使这更简单。

Global Mixin是一个很好的选择，只需要很少的代码：

Vue.mixin({
  computed: {
    window() { return window; }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ window.location.host }}</p>
</div>

这样，window计算属性将可用于（因此可在模板中使用）任何Vue组件。

Answer 2

我建议将所有逻辑移动到计算属性。这使您的代码更清晰，更易读。

将您的组件视为MVC，其中模板是View，组件对象是控制器，属性和计算属性是模型。你没有在视图层中放置逻辑，对吗？

所以而不是

<template>
  <div>
   {{ _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x') }}
  </div>
</template>

export default {
    computed: {
        _() { return _; }
    }
}

类似的东西：

<template>
  <div>
   {{ diff1 }}
  </div>
</template>

export default {
    computed: {
        diff1: _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x'),
    }
}

通过计算属性在组件中包含库

2 个答案: