计算属性介于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>