Question

想象一下我有以下两种情况：

方案1：

data(){
    return {
        number: 2
    }
},
methods: {
    multiplyByTwo(number){
        return number*2
    }
},
mounted(){
    this.multiplyByTwo(this.number)
}

方案2：

data(){
    return {
        number: 2
    }
},
methods: {
    multiplyByTwo(){
        return this.number*2
    }
},
mounted(){
    this.multiplyByTwo()
}

如您所见，在两种情况下，函数multipleByTwo返回数据数属性乘以2，但是，在第一种情况下，我将数据号属性作为该函数的参数传递，在第二种情况下，我直接从函数内部访问数据号属性，而不将其作为参数传递。

现在，我想知道其中一种方法是否比另一种更好或更糟。我觉得方案2不太灵活，因为要使用该方法，该组件将必须具有数据属性编号，否则它将无法正常工作。

第一种情况下的方法可以在任何地方重用，因为我必须将数字作为参数传递。

即使我这样想，我还是很遗憾，我在Vue.js应用程序中使用了很多场景2，并且我正在考虑重写一些方法（如果这是写得不好的代码）。

Answer 1

要视情况而定。

如果该方法没有副作用，并且可能并不总是在组件的状态下运行，那么您应该传递所需的任何参数。如果multiplyByTwo(this.number)和multiplyByTwo(4)的可能性相同，那么这是有道理的。
如果该方法具有副作用，并且仅在内部状态下运行（如您的示例），那么我认为这是一个判断调用。但是，名称的选择将更加清楚。如果我读doubleTheCurrentNumber，就不会因为缺少参数而感到惊讶。
如果该方法始终在内部状态下运行，则将状态变量作为参数传递是没有意义的。例如：insertDocument()可以基于填写表单进行API调用。
如果操作结果需要是被动的，但没有直接调用，那么您需要使用computed property。过滤列表是计算属性的一个很好的例子。

Answer 2

我认为由于您没有修改值，因此两者应该相同。

我认为这种情况的最佳方法是使用他们的computed properties

在方法内部使用Vue.js数据属性而不将其作为参数传递是错误的吗？

2 个答案: