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> ~~~