Question

我有一个自定义指令：myMethod =“ loadProfile（currentUser）” ，该组件在加载组件时加载JSON。我使用mapGetters中的Vuex，但令人惊讶的是，此方法也很好用。.与{{1} }或mounted钩子（我也尝试过）？在挂接或自定义指令上调用哪个更好？

这是我的示例代码：

created

Vuex吸气剂

  <template v-if="currentUser.username === 'admin'">
       ... //
  <template v-else>
      <div :myMethod="loadProfile(currentUser)"></div>
  </template>

方法

  computed: {
     ...mapGetters([
         'currentUser',
     ])
  }

Answer 1

除非确实需要，否则不要使用方法。在这种情况下，似乎没有理由在没有loadProfile的情况下调用currentUser，因此只需将其移至计算属性即可：

computed: {
  ...mapGetters([
    'currentUser'
  ]),
  actualUser () {
    // Make a shallow copy
    const user = { ...this.user };

    if (this.currentUser) {
      user.lastName = this.currentUser.lastName;
      user.firstName = this.currentUser.firstName;
      user.image = (this.currentUser.image === 'no_avatar.png' ? '/image/no_avatar.png' : `/storage/images/${this.currentUser.image}`);
    }

    return user;
  }
}

为什么要使用计算属性？每当依赖项更新时，都会计算并更新计算的属性。当依赖项保持恒定时，将仅从缓存加载计算所得的属性。这样可以提高性能，并使其有效，因此您不必担心何时需要自己更新数据。

至于指令的使用。在大多数情况下，您不需要使用指令。您在这里没有发送对指令的函数引用，而是向方法发送了计算结果，因此执行<div :myMethod="actualUser"></div>也可以。您可能要确保使用实际组件无法完成您的工作。组件可重用，并且比自定义指令中的代码更易于阅读。

Answer 2

Vue.js指令仅用于执行一些常规组件无法执行的低级DOM操作。简而言之，您不应该执行当前操作。

现在继续回答：

在您的代码中，您正在执行以下操作：<div :myMethod="loadProfile(currentUser)"></div>。如果:myMethod是指令，则它应该是v-myMethod=""而不是:myMethod=""。后一种语法，即冒号语法是指props而不是指令。因此，这意味着您的代码并不是真正的执行指令。只是将myMethod当作道具。

第二，执行:myMethod="loadProfile(currentUser)"并不意味着您在实际的指令代码中执行任何操作。仍在组件模板中调用它。

第三，如果我们看一下您的loadProfile()方法的实现，那么它不是返回值的函数。它只是使用this的函数修改组件实例。如果您只需要这样做，那么就不需要指令或道具。

第四，做:myMethod="loadProfile(currentUser)"可以工作，但是看起来很尴尬，绝对不可读。相反，您应该依靠观察者或计算属性。这是Vue.js中惯用的方式。看守示例的实现如下所示：

watch: {
    currentUser(newVal) {
        this.user.last_name = newVal.last_name,
        this.user.first_name =  newVal.first_name,
        this.user.image = ( newVal.image === 'no_avatar.png' ? '/image/no_avatar.png' : '/storage/images/'+ newVal.image)
    }

}

就性能而言，您不必为此担心。绩效损失（如果有的话）可以忽略不计。

Vue.js中的自定义指令

2 个答案: