Vue.js中的自定义指令

我有一个自定义指令：myMethod=“loadProfile（currentUser）”，它在加载组件时加载JSON。我使用

Vuex

中的

maggetters

，但令人惊讶的是，这种方法也工作得很好。与其他方法（如在

mounted

或

created

hooks中调用方法（我也尝试过）相比，这种方法是否正确或在性能方面有问题？调用hook或custom指令哪个更好

以下是我的示例代码：

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

方法

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

---

除非你真的需要，否则不要使用方法。在这种情况下，似乎没有什么理由在没有

currentUser

的情况下调用

loadProfile

，所以让我们将其移动到计算属性：

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;
  }
}

为什么要使用计算属性？计算属性在其依赖项更新时进行计算和更新。当依赖项保持不变时，计算属性将仅从缓存加载。这对性能来说是一个更好的选择，因此您不必担心自己何时更新数据

---

---

至于指令的使用。在大多数情况下，您不需要使用指令。这里不向指令发送函数引用，而是向方法的计算结果发送函数引用，因此执行

也可以。您可能希望确保您所做的不能用实际的组件来完成。组件是可重用的，并且比自定义指令中的代码更易于阅读。

除非您确实需要，否则不要使用方法。在这种情况下，似乎没有什么理由在没有

currentUser

的情况下调用

loadProfile

，所以让我们将其移动到计算属性：

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;
  }
}

为什么要使用计算属性？计算属性在其依赖项更新时进行计算和更新。当依赖项保持不变时，计算属性将仅从缓存加载。这对性能来说是一个更好的选择，因此您不必担心自己何时更新数据

---

---

至于指令的使用。在大多数情况下，您不需要使用指令。这里不向指令发送函数引用，而是向方法的计算结果发送函数引用，因此执行

也可以。您可能希望确保您所做的不能用实际的组件来完成。组件是可重用的，并且比自定义指令中的代码更易于阅读。

Vue.js指令只用于执行一些常规组件无法执行的低级DOM操作。所以简而言之，你不应该做你现在正在做的事情

现在再回答一个问题：

在代码中，您正在执行以下操作：

。如果

：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指令只用于执行一些常规组件无法执行的低级DOM操作。所以简而言之，你不应该做你现在正在做的事情

现在再回答一个问题：

在代码中，您正在执行以下操作：

。如果

：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)
    }

}

---

就性能而言，你不必担心。性能损失（如果有）可以忽略不计。

感谢您的回复和回答。现在我明白了。谢谢你的回复和回答。现在我明白了。谢谢兄弟，感谢你的澄清。谢谢兄弟，感谢你的澄清。