Vue.js中方法和计算值的主要区别是什么?
在我看来,它们是一样的,是可以互换的。
Vue.js中方法和计算值的主要区别是什么?
在我看来,它们是一样的,是可以互换的。
当前回答
在vue 3附带的vue组合API中,可以作为vue 2的插件使用,方法和计算属性是不同的语法:
例子:
计算:
它是一个默认接受getter回调作为参数的函数,并根据其他属性(如ref, reactive或store state)返回一个不可变的ref。
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
return {count,doubleCount} //expose the properties to the template
}
}
方法
它们是纯javascript函数,在Vue和vanilla js中以相同的方式表现,它们暴露在模板中并用作事件处理程序,它们不应该用于渲染目的,这可能会导致一些问题,如无限渲染。
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
function increment(){
ref.value++
}
return {count,doubleCount,increment} //expose the properties/functions to the template
}
}
区别在于:
计算:
它被计算为不可变属性,而不是函数 它观察另一个属性并基于该属性返回一个属性。 它不能带参数。 可以使用watch属性观看它
方法:
用于重构computed/watcher属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题,不应该在模板中调用它。
其他回答
下面是这个问题的详细分析。
何时使用方法
对DOM中发生的事件做出反应 在组件中发生事情时调用函数。 可以从计算属性或观察器调用方法。
何时使用计算属性
您需要从现有数据源组合新数据 在模板中使用的变量是由一个或多个数据属性构建的 您希望将复杂的、嵌套的属性名称简化为更易于阅读和使用的名称(但在原始属性更改时更新它) 您需要从模板引用一个值。在这种情况下,创建计算属性是最好的,因为它是缓存的。 您需要侦听多个数据属性的更改
偶然发现了同样的问题。对我来说,更清楚的是:
当Vue.js看到v-on指令后面跟着一个方法时,它确切地知道要调用哪个方法以及何时调用它。
<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button
<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */
当一个方法在没有v-on指令的情况下被调用时,它将在更新DOM的页面上触发一个事件时被调用(或者只是需要重新呈现页面的一部分)。即使该方法与被触发的事件没有任何关系。
<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
messageUppercase() {
console.log("messageUpercase");
return this.message.toUpperCase();
}
}
/* The method `messageUppercase()` is called on every button click, mouse hover
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/
Computed属性仅在this词在其函数定义中引用的属性值发生更改时调用。
<p>Uppercase message: {{ messageUppercase }}</p>
data() {
return {
message: "I love Vue.js"
}
},
computed: {
messageUppercase() {
console.log("messageUpercase");
return this.message.toUpperCase();
}
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific
event changes the value of message. */
这里的要点是,在没有使用v-on指令调用方法的情况下使用computed属性是最佳实践。
来自文档
..计算属性是基于它们的依赖项缓存的。计算属性只有在其某些依赖项发生更改时才会重新计算。
如果您希望缓存数据,请使用Computed属性,另一方面,如果您不想缓存数据,请使用简单的Method属性。
根据vueJs文档,一个简单的方法是:
相比之下,每当重新呈现发生时,方法调用将始终运行该函数。
而计算属性只有在其响应性依赖项发生更改时才会重新计算
计算属性
计算属性也称为计算值。这意味着,它们可以随时更新和更改。此外,它还缓存数据,直到数据发生更改。在实例化Vue时,计算属性将转换为属性。
还有一件事我想分享,你不能在计算属性中传递任何参数,这就是为什么在调用任何计算机属性时不需要括号。
方法
方法与函数相同,以相同的方式工作。此外,除非调用方法,否则方法什么也不做。此外,像所有javascript函数一样,它接受参数,并且每次调用时都会重新计算。之后,它们就不能缓存值了
在方法中调用圆括号,你可以发送一个或多个参数。