Vue中的计算属性和侦听属性

Posted yizhiran

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的计算属性和侦听属性相关的知识,希望对你有一定的参考价值。

Vue的侦听属性可以使用 watch ,它可以监听多个变量,一旦它们发生了变化,就执行function函数,var代表的是这个发生变化了的参数。

var vm 
= new Vue({ el: ‘#demo‘, data: { firstName: ‘Foo‘, lastName: ‘Bar‘, fullName: ‘Foo Bar‘ }, watch: { firstName: function (val) { this.fullName = val + ‘ ‘ + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ‘ ‘ + val } } })

但是这有一个不方便的地方,它是命令式且重复的。实际上我们想根据firstName和lastName的值来得到相应的fullName,所以直接计算fullName的值,使用computed属性:

 1 var vm = new Vue({
 2   el: ‘#demo‘,
 3   data: {
 4     firstName: ‘Foo‘,
 5     lastName: ‘Bar‘
 6   },
 7   computed: {
 8     fullName: function () {
 9       return this.firstName + ‘ ‘ + this.lastName
10     }
11   }
12 })

我发现在data中可以不用先定义fullName,这与watch属性又不一样。

以上是关于Vue中的计算属性和侦听属性的主要内容,如果未能解决你的问题,请参考以下文章

Vue中的计算属性和侦听属性

1.3 Vue中的计算属性和侦听器

vue的计算属性和侦听属性的区别

Vue2.0笔记——计算属性和侦听器

VUE3 之 计算属性与侦听器

侦听对象 watch