参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-13计算属性
计算属性介于data对象的属性和方法两者之间：可以像访问data对象的属性那样访问它，但需要以函数的方式定义它。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算属性title>
head>
<body>
<div id="app">
<p>所有数的和：{{numberTotal}}p>
<p>所有数的和：{{numberTotal}}p>
<p>当前书籍：{{booksComputed}}p>
<p>添加书籍：{{booksComputed = "笑傲江湖"}}p>
div>
<script src="https://unpkg.com/vue">script>
<script>
new Vue({
el: "#app",
data: {
numbers: [3, 5, 9],
books:"射雕英雄传"
},
computed: {
// 计算属性会被缓存：如果在模板中多次调用一个方法，
// 方法中的代码在每一次调用时都会执行一遍；
// 但如果计算属性被多次调用，其中的代码只会执行一次，之后的每次调用都会使用被缓存的值。
// 只有当计算属性的依赖发生变化时，代码才会被再次执行
numberTotal() {
console.log("numberTotal");
return this.numbers.reduce((sum, val) => sum + val);
},
// 还可以设置计算属性的值，并且在设置过程中做一些操作。
// 实现这一点需要将计算属性由函数改为带有get和set属性的对象。
booksComputed: {
get(){
return this.books;
},
set(newVal){
console.log("set");
this.books = "《" + newVal + "》";
}
}
}
})
script>
body>
html>