<body> <div id="root"> {{fullName()}} {{age}} </div> <script> var vm = new Vue({ el: "#root", data:{ firstName:"Yu", lastName:"Lee", age:21, }, //方法一:计算属性 computed:{ fullName:function () { console.log("计算了一次"); return this.firstName +" "+this.lastName; } }, //方法二:方法(无缓存) methods:{ fullName:function () { console.log("计算了一次"); return this.firstName +" "+this.lastName; } }, //方法三:监听 watch:{ firstName:function () { console.log("计算了一次"); return this.firstName +" "+this.lastName; }, lastName:function () { console.log("计算了一次"); return this.firstName +" "+this.lastName; } } }) </script> </body>
监听与计算属性均有缓存机制,所谓缓存机制就是"不依赖的属性发生改变时,不会重新计算一次“