3-4計算屬性,方法,偵聽器 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計算屬性,方法,偵聽器</title> <script src="vue.js"></script> </head> <body> <div id="app">    {{fullName}} {{age}} </div> <script> /** * 如果一個功能可以通過methods,watch,computed實現,用computed效率最高 * @type {Vue} */ var vm = new Vue({ el: '#app', data: { firstName: 'Han', lastName: 'MeiMei', fullName: 'Han MeiMei', age: 28, }, //偵聽器 watch: { firstName() { console.log('計算了一次') this.fullName = this.firstName + ' ' + this.lastName }, lastName: function () { console.log('計算了一次') this.fullName = this.firstName + ' ' + this.lastName; } }, //方法沒有緩存機制和計算屬性比,計算屬性效率更加高 // methods:{ // fullName(){ // //當其它數據發生改變時,會重新運行,比如age發生了改變 // console.log('計算了一次') // return this.firstName+" "+this.lastName // } // }, //計算屬性有緩存的概念對應的數據發生了變化,會重新計算 // computed:{ // fullName(){ // console.log('計算了一次') // return this.firstName+" "+this.lastName // } // } }); </script> </body> </html> ~~~