vue composition api 如何解决命名冲突? [英] vue composition api how does it solve naming conflicts?

问题描述

据说composition api解决了mixin带来的命名冲突.

这是我在网上找到的关于组合 API 的内容.

出口默认{设置 () {const { someVar1, someMethod1 } = useCompFunction1();const { someVar2, someMethod2 } = useCompFunction2();返回 {someVar1，一些方法1，someVar2，一些方法2}}}

我猜，useCompFunction1() 和 useCompFunction2 就像 mixin.在这个例子中，一切都很好.但是如果 useCompFunction1() 和 useCompFunction2() 使用同名的变量，我们仍然会在上面的代码中遇到问题，因为我们将无法使用两个变量.所以，命名冲突当然仍然存在.那为什么说命名冲突是用Composition API解决的呢?

更新:

我提供的示例，连同它，这是我发现应如何编写可重用代码的代码.

import { ref,calculated } from vue";导出默认{设置() {常量计数 = ref(0);const double = 计算(() => count.value * 2)函数增量(){计数值++；}返回 {数数，双倍的，增量}}}

如您所见，它返回带有count、double、increment 的变量.它的做法是调用者应该知道它的名称才能使用它.因此，它仍然由组合决定变量的名称.有什么想法吗?

解决方案

mixin 和组合函数的主要区别在于 mixin 决定它提供的变量名称，但组合函数，您根据组合函数提供的结果决定变量的名称您分配...

示例:

const { someVar1, someMethod1 } = useCompFunction1();const { someVar1, someMethod1 } = useCompFunction2();

....大多数 IDE 告诉您这是不正确的，因为您正在声明已经存在的变量...

关键是，useCompFunction1 或 useCompFunction2 中的变量名称是什么并不重要，因为它们是局部变量.但是要使用它们你需要声明你自己的变量并从组合函数结果中分配它......所以你决定变量名，而不是你正在使用的'mixin'......>

更新

所以，仍然是组合决定变量的名称

不，是你！

如果您按原样使用结果:

const comp1 = useCompFunction1();

...您将结果与您选择的名称一起使用:

console.log(comp1.count)

但是，如果您选择使用解构，你仍然可以重命名你得到的变量:

const { count: count1, double: double1, increment: increment1 } = useCompFunction1();

...现在您可以根据需要使用变量 count1、double1 和 increment1...

It's said that composition api solves naming conflicts which were brought by mixins.

This is what I found on the internet about composition API.

export default {
  setup () {
    const { someVar1, someMethod1 } = useCompFunction1();
    const { someVar2, someMethod2 } = useCompFunction2();
    return {
      someVar1,
      someMethod1,
      someVar2,
      someMethod2
    }
  }
}

I guess, useCompFunction1() and useCompFunction2 are like mixins. In the example, all is good. but if useCompFunction1() and useCompFunction2() use the variable with the same name, we would still have a problem in the above code since we wouldn't be able to use both of the variables. So, naming conflicts are of course still there. Then why does it say that naming collisions are solved with Composition API?

UPDATE:

The example I provided, with it, This is the code I found how reusable code should be written.

import { ref, computed } from "vue";


export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2)
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

As you can see, it returns variables with count, double, increment. The way it does is the caller should know the names of it to use it. So, it's still composition which decides what to name the variables. Any idea ?

解决方案

The main difference between mixin and composition function is that mixin decides about variable names it provides but with composition function, YOU decide about the names of the variables YOU assign from the result the composition function provides...

Example:

const { someVar1, someMethod1 } = useCompFunction1();
const { someVar1, someMethod1 } = useCompFunction2();

....most of the IDE's tells you this is not correct as you are declaring variables which already exist...

The point is, it doesn't matter what are the variable names inside useCompFunction1 or useCompFunction2 as those are local variables. But to use them You need to declare your own variables and assign it from the composition function result...so you decide about the variable name, not the 'mixin' you are using...

Update

So, it's still composition which decides what to name the variables

No, its You!

If you use result as-is:

const comp1 = useCompFunction1();

...you use the result with the name you choose:

console.log(comp1.count)

However if you choose to use destructuring, you can still rename the variables you get:

const { count: count1, double: double1, increment: increment1 } = useCompFunction1();

...now you can use variables count1, double1 and increment1 as you see fit...

这篇关于vue composition api 如何解决命名冲突?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！