今天带你详细了解各组件原理，vue计算属性和监听器，前端开发特点

data: {

mathScore: 80,

englishScore: 90,

},

methods: {

sumScore: function () {

console.log(“sumScore函数被调用了。。。”)

// this 指向的是vm实例

// 减0是为了字符串转为数字运算

return (this.mathScore - 0) + (this.englishScore - 0)

},

},

})

使用计算属性

数学：

英语：

总得分(函数)：

总得分(计算属性)：

1. 函数没有缓存，每次都会调用。

2. 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。

3. 函数只支持单项的。

4. 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。如果想要进行双向，则需要自定义setter函数。

计算属性（双向绑定）

计算属性默认只有getter，不过在需要的时候你也可以提供一个setter。

数学：

英语：

总得分(函数-单项绑定)：

总得分(计算属性-单项绑定)：

总得分(计算属性-双向绑定)：