methods、computed和watch这3个属性在Vue中较为常用,可以进行方法的定义以及数值的计算,以下是对这3个属性进行介绍及相关的区别。
methods属性
methods属性是定义方法的主要区域,在此属性中,可以定义各种自定义函数名的方法以及参数,基本用法与一般的\
var vm = new Vue({
data() {
return {
data1: 0
}
},
methods: {
getData() {
// 返回data1的值
this.data1 = 1
return this.data1
}
}
})
调用methods方法中的方式有几种,如:
// 使用Vue实例来进行调用
vm.getData()
// 在HTML元素中调用
<div>{{getData()}}</div>
// 在另一个方法中调用
getAnotherData() {
this.getData()
}
// 作为事件的回调函数
<a @click="getData"></a>
computed属性
computed属性同样是能够定义自定义的方法,如:
var vm = new Vue({
data() {
return {
data1: 0
}
},
computed: {
getData() {
// 返回data1的值
return this.data1
}
}
})
调用computed的方式也有几种,如:
// 使用Vue实例来进行调用
vm.getData
// 在HTML元素中调用
<div>{{getData}}</div>
computed和methods的区别
computed属性和methods属性的定义和调用方式都非常的类似,这让很多人会产生迷惑,是否两者可以相互混着用,或者是框架设计上的问题,答案当然是否定的。
1、首先,methods直译过来的意思是“方法”,一般是用来定义Vue实例下的全局方法,用于在其他地方调用;computed则为“计算”属性,其更多的是为了处理模版表达式中过多的逻辑问题。此处使用官方的例子举例:
// 此处要完成一个字符串反转的功能,模版中的表达式过于冗长
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
// 使用computed属性则可以简化模板表达式
// 将复杂的逻辑发在computed中
computed: {
// 计算属性的 getter
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
2、computed属性除了提供getter外,还提供setter,当设置computed属性中的方法时,会自动改变值。
var vm = new Vue({
el: '#app',
data() {
return {
name: ''
}
},
computed: {
nameVal: {
get: function () {
return this.name
},
set: function (newVal) {
this.name = newVal
}
}
}
});
// 设置name的值,此时name为'apple'
vm.nameVal = 'apple'
computed属性set新值的方式是使用属性赋值的方式,而一般methods中的方法则采用传递参数的方式:nameVal('apple')
3、computed属性和methods属性最大的区别在于前者具有缓存功能,而后者则没有。computed属性只有在它的相关依赖发生变化时才会重新求值,只要没有值的改变,就不会去再次执行该函数。
以下是使用计算属性计算当前的时间戳,通过now方法返回当前的时间戳,time1显示的是第一次计算的结果,然后通过vm.now再一次调用,并在time2中显示,demo如下:
<div id="app">
<div id="time1">{{now}}</div>
<div id="time2"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
computed: {
now() {
return Date.now()
}
}
});
var str = vm.now;
document.getElementById('time2').innerHTML = str;
</script>
结果显示为:
1517364585280
1517364585280
从以上的结果可以看出,在第二次使用vm.now调用的时候,由于相关的依赖没有发生改变,得到的结果与第一次调用now方法的结果是相同的,即表明computed具有缓存功能。
computed属性也并非无法去除这个缓存功能的,Vue还提供了一个控制缓存的开关供用户选择——。上面的demo可以改造为:
<div id="app">
<div id="time1">{{now}}</div>
<div id="time2"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
computed: {
now: {
cache: false,
get: function () {
return Date.now()
}
}
}
});
var str = vm.now;
document.getElementById('time2').innerHTML = str;
</script>
结果显示为:
1517364584518
1517364594521
此时可以明显地看到,两次获取的当前时间戳不一样,即缓存功能被关闭了。如果你在使用computed属性进行计算的时候,又希望实时更新它的值,那么可以使用cache属性来实现,但相对的,计算的开销要大一些。
watch属性
watch属性是用来侦听数据的变化,当侦听的数值发生变化时,会触发相对应的方法。一般侦听数值的方法是以数值同名作为方法名,方法接收两个参数,newValue和oldValue,分别代表新值和旧值,demo如下:
var vm = new Vue({
el: '#app',
data() {
return {
name: 'Neil'
}
},
watch: {
name() {
for (var i in arguments) {
console.log('arguments: ' + arguments[i])
}
}
}
});
以上的demo是定义了一个数值字符串name,当name的值发生改变的时候,会打印出所有的参数。那么现在使用vm.name='Peter'
来改变name的值,结果如下:
arguments: Peter
arguments: Neil
"Peter"
通过结果可以看到,即便方法中没有带任何参数,仍然可以通过arguments来获取参数的值,即newValue为’Peter’,oldValue为’Neil’(初始值),当你需要使用参数来完成相关逻辑的时候,最好还是使用参数名的方式进行调用,同时不要弄反了顺序。