计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的 ；方法不存在缓存||侦听器
生活随笔
收集整理的這篇文章主要介紹了
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的 ；方法不存在缓存||侦听器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
計算屬性
1. 為何需要計算屬性？
表達式的計算邏輯可能會比較復雜，使用計算屬性可以使模板內容更加簡潔
2. 計算屬性的用法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{msg}}</div><div>{{reverseString}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*計算屬性*/var vm = new Vue({el: '#app',data: {msg: 'Nihao'},computed: {reverseString: function(){return this.msg.split('').reverse().join('');}}});</script> </body> </html>計算屬性與方法的區別
計算屬性是基于它們的依賴進行緩存的
方法不存在緩存
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{reverseString}}</div><div>{{reverseString}}</div><div>{{reverseMessage()}}</div><div>{{reverseMessage()}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*計算屬性與方法的區別:計算屬性是基于依賴進行緩存的，而方法不緩存*/var vm = new Vue({el: '#app',data: {msg: 'Nihao',num: 100},methods: {reverseMessage: function(){console.log('methods')return this.msg.split('').reverse().join('');}},computed: {reverseString: function(){console.log('computed')// return this.msg.split('').reverse().join('');var total = 0;for(var i=0;i<=this.num;i++){total += i;}return total;}}});</script> </body> </html>偵聽器
1. 偵聽器的應用場景 ? ?數據變化時執行異步或開銷較大的操作
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div><span>名：</span><span><input type="text" v-model='firstName'></span></div><div><span>姓：</span><span><input type="text" v-model='lastName'></span></div><div>{{fullName}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*偵聽器*/var vm = new Vue({el: '#app',data: {firstName: 'Jim',lastName: 'Green',fullName: 'Jim Green'},watch: {firstName: function(val) {this.fullName = val + ' ' + this.lastName;},lastName: function(val) {this.fullName = this.firstName + ' ' + val;}}});</script> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div><span>名：</span><span><input type="text" v-model='firstName'></span></div><div><span>姓：</span><span><input type="text" v-model='lastName'></span></div><div>{{fullName}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*偵聽器*/var vm = new Vue({el: '#app',data: {firstName: 'Jim',lastName: 'Green',},computed: {fullName: function(){return this.firstName + ' ' + this.lastName;}}});</script> </body> </html>
總結
以上是生活随笔為你收集整理的计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的 ；方法不存在缓存||侦听器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue常用特性——表单操作、表单域修饰符
- 下一篇： 案例：验证用户名是否可用