<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- {{fullName}} --- {{age}} 计算属性--> <!-- {{fullName()}} --- {{age}} methods方法--> {{youFullName}} --- {{age}}---watch侦听器 </div> </body> <script type="text/javascript"> let vm = new Vue({ // vue模板语法 el: '#app', data: { firstName: 'Dell', lastName: 'Less', youFullName: 'Dell Less', age: 20 }, //计算属性, 缓存机制 // computed: { // fullName () { // // 当firstName 和lastName 没有发生改变时，fillName不会重新计算(调用函数)，提升性能 // console.log('计算一次') // // 控制台调用vm.$data.age = 15, age发生变化， // // fullName由于缓存机制，相关联的属性没有发生改变就不会重新计算 // return this.firstName +' '+ this.lastName // } // } // methods方法 // methods: { // fullName () { // console.log('methods方法计算一次') // // 控制台调用vm.$data.age = 15, age发生变化，fullName也发生变化 // return this.firstName + ' ' + this.lastName // } // } //watch 侦听器， 缓存机制 watch: { //监听firstName和lastName属性是否发生改变并作出相应的操作 //控制台调用vm.$data.age = 15, age发生变化，youfullname并不会发生变化，因为并没有监听age属性 // firstName: function () { console.log('watch监听') this.youFullName = this.firstName + ' ' + this.lastName }, lastName: function () { console.log('watch监听') this.youFullName = this.firstName + ' ' + this.lastName } } }) </script> </html>
vue_computed计算属性_methods方法_watch监听器
猜你喜欢
转载自www.cnblogs.com/JunLan/p/12410727.html
今日推荐
周排行