计算属性computed

computed

在Vue中有多种方法为视图设置值：

1.使用指令直接将数据值绑定到视图

2.使用简单的表达式对内容进行简单的转换

3.使用过滤器对内容进行简单的转换

除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

如果在模板中放入太多的逻辑会让模板过重而且难以维护。官方强调对于任何复杂逻辑，最好使用计算属性。

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

<p>Original message: "{{ message }}"</p>

<p>Computed reversed message: "{{ reversedMessage }}"</p>

data: {

message: 'Hello'

},

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

},

updateMessage: {

get: function() {

console.log('计算属性', this.message)

return this.message

}

}

}

注意当模板中不使用updateMessage，即使message发生改变之后，也不会走computed。

computed的getter函数

在vue中，computed的属性可以被视为是data一样，可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值)，一般情况下，是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值。所以，computed默认格式（是不表明getter函数的）

computed中的setter函数

当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。

<div>{{totalMarks}}</div>

<div>{{computedMsg}}</div>

data () {

return {

results: [

{ name: 'English', marks: 70 },

{ name: 'Math', marks: 80 },

{ name: 'History', marks: 90 }

],

msg:'haha'

}

},

computed: {

totalMarks(){

console.log(1)

let total=0

for(let i=0;i<this.results.length;i++){

total+=this.results[i].marks

}

return total

},

computedMsg:{

get:function(){

return this.msg

},

set:function(newVal){

this.msg=newVal

}

}

},

mounted () {

this.computedMsg='??'

}