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属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题,不应该在模板中调用它。
其他回答
来自文档
..计算属性是基于它们的依赖项缓存的。计算属性只有在其某些依赖项发生更改时才会重新计算。
如果您希望缓存数据,请使用Computed属性,另一方面,如果您不想缓存数据,请使用简单的Method属性。
computed和methods之间的区别在于,当你在computed中定义一个函数时,它只在答案改变时才从头执行该函数,而methods在每次调用时都从头执行该函数。
根据vueJs文档,一个简单的方法是:
相比之下,每当重新呈现发生时,方法调用将始终运行该函数。
而计算属性只有在其响应性依赖项发生更改时才会重新计算
Vue中的计算值和方法非常不同,在大多数情况下肯定是不可互换的。
计算属性
A more appropriate name for a computed value is a computed property. In fact, when the Vue is instantiated, computed properties are converted into a property of the Vue with a getter and sometimes a setter. Basically you can think of a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated. You don't call a computed and it doesn't accept any parameters. You reference a computed property just like you would a data property. Here's the classic example from the documentation:
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
它在DOM中是这样引用的:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
计算值对于操作Vue上存在的数据非常有价值。每当您想要过滤或转换数据时,通常都会使用计算值来实现此目的。
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
计算值也会被缓存,以避免重复计算一个没有改变时不需要重新计算的值(例如,因为它可能不在循环中)。
方法
方法只是绑定到Vue实例的函数。它只在显式调用时才会被求值。像所有的javascript函数一样,它接受参数,并且每次被调用时都会被重新求值。方法在同样的情况下也很有用,任何函数都有用。
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichChar))
}
}
Vue的文档非常好,而且易于访问。我推荐它。
在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属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题,不应该在模板中调用它。