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屋!