Javascript Vue3-更改属性输入的函数

我目前正在使用地图构建一个Vue应用程序。功能基本上就是这样。我在地图上有一个位置和一个算法来确定这个位置是在水面上还是在陆地上。如果它在水上，我想在附近的任意位置重复，直到我的位置在陆地上，并返回这些坐标。因此，基本上我的（首先测试它的非常基本的）代码看起来与此类似

模板中的片段

对应代码

const getpositionoverland=（coords:any，trys=100）=>{
const newCoords=[coords[0]，coords[1]]作为[number，number]；
让thisTry=0；
while（isOverWater（newCoords）和&thisTry

现在我调试了算法，效果很好。通常在5次左右的尝试后，在陆地上找到一个位置并返回。我还实现了一个最大尝试次数的参数，因此，如果在公海上的某个位置（例如，正在放置错误）在一定次数的尝试后抛出

现在我在vue中的问题是。如果我更改函数中的坐标（无论是使用return语句还是更改数组中的坐标），函数将再次被触发，留下一个无限循环

有没有可能防止这种行为，并确保算法只运行一次，或者我错过了其他什么

---

我还试图返回给定的坐标进行测试，但这不会导致无限循环。

不确定是什么触发了反应性。从发布的代码中，无法判断，因为没有反应变量，所以它可能是由更上游的东西引起的

但是，我认为：

对于vue来说是一种代码味道，因为它有可能导致您所看到的问题类型

当您将函数结果作为参数传递到中时，每当任何父级触发重新渲染时，该函数都将重新运行。如果函数中有任何东西触发了重新渲染（这里似乎不是这样，但我没有看到返回，所以我知道它没有完整显示）

更好的方法是使用

计算出的

，或通过

监视更新的
数据
，这样存储值并仅在需要时进行更改。
好的

正如已经指出的，问题是位置上的每一个突变都会触发另一个重新进入（这仍然不能解释为什么函数中直接返回参数本身不会导致相同的行为）

然而，我能够解决我的问题。现在我将发布比原始问题中包含的代码多一点的代码，因为涉及到另一个具有异步行为的组件。所以我的html看起来像这样



现在，位置需要是一个ref，一旦地图加载并可用，该ref将被更新。这将确保数据只发生一次变异，而不是函数反复运行

我还稍微更改了getPositionOverLand函数，但其功能与以前基本相同。我只是更喜欢递归变量而不是while循环

const myPosition=ref（[10,10]）；
常量getPositionOverLand=（coords，currentTry=0，MaxTry=100）=>{
如果（！isOverWater（coords））
返回坐标；
设newCoords=[
coords[0]+（Math.random（）-0.5）*0.5，
coords[1]+（Math.random（）-0.5）*0.5
];
如果（currentTry>=MaxTry）
抛出新错误（“无法在陆地上找到任何位置”）；
返回（isOverWater（newCoords）和¤tTry{
myPosition.value=getPositionOverLand（myPosition.value）；
}

现在，虽然这是工作，我仍然认为这是不漂亮的。我更喜欢使用函数，而不是对ref进行变异，因为以这种方式，使用v-for（例如）将非常干净，就像在代码中迭代该数组并更改每个值一样

现在，我会让这个答案，但如果有人想出一个更干净的方法来做这件事，我会非常乐意改变被接受的答案；）
 是的，这也是我所期望的。然而，由于我需要能够使用一个输入参数，所以实际上不可能进行计算。