computed中text方法传递index,利用了闭包传值

80 阅读1分钟

index.vue <van-circle
v-model="Ratedata[index].currentRate"
color="#2462E8"
fill="#fff"
layer-color="#E6E6E6"
:rate="Ratedata[index].rate"
:text="text(index)"
:speed="60"
:clockwise="true"
:stroke-width="40"
/>

computed中text方法传递index,利用了闭包传值

在你的代码中,你定义了一个 computed 属性 text,它返回了一个函数作为计算属性的值。这里所说的闭包指的是该函数引用了它被定义时所在的作用域中的变量,即 index 变量。

闭包是指函数和其相关的引用环境组合在一起形成的实体。在你的代码中,返回的函数在定义时可以访问到 text 函数内部的 index 变量。即使 text 函数执行完毕后,返回的函数仍然可以访问和使用它引用的 index 变量值。

举个例子来说明闭包的概念:

computed: {
text() {
return function (index) {
return this.Ratedata[index].currentRate.toFixed(0) + '%';
}
}
}, 在上述例子中,outerFunction 是外部函数,innerFunction 是内部函数。当 outerFunction 被调用时,返回了 innerFunction,并将其赋值给 closure 变量。即便 outerFunction 的执行已经结束,但 closure 仍能访问到 outerFunction 中的 outerVariable 变量,因为 closure 形成了闭包,保持对被闭合的环境的引用。

在你的代码中,text 函数作为计算属性的返回值,形成了闭包,并在返回的函数中使用了 index 变量。这样,每当你调用 text 函数并传递一个 index 值时,它会根据传入的 index 值来访问对应的 this.Ratedata 数组并计算结果。

闭包的优点是可以使函数保留对它被定义时的上下文环境的引用,这在某些情况下非常有用,例如需要在函数调用后还能访问到特定的变量或状态。