計算屬性關鍵詞: computed。 計算屬性在處理一些複雜邏輯時是很有用的。 下麵是字元串反轉的一些寫法，看起來有點複雜 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> ...
計算屬性關鍵詞: computed。
計算屬性在處理一些複雜邏輯時是很有用的。
下麵是字元串反轉的一些寫法，看起來有點複雜
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> {{ message.split('').reverse().join('') }} </div> <script> new Vue({ el: '#demo', data: { message:"cyy" }, methods:{ }, filters:{//過濾器 } }) </script>
接下來是使用了計算屬性的實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> {{message}} {{remessage}} </div> <script> new Vue({ el: '#demo', data: { message:"cyy" }, computed: { // 計算屬性的 getter remessage: function () { return this.message.split("").reverse().join("") } } }) </script>
實例 2 中聲明瞭一個計算屬性 remessage。
提供的函數將用作屬性 vm.remessage 的 getter 。
vm.rremessage 依賴於 vm.message，在 vm.message 發生改變時，vm.remessage 也會更新。
computed和methods的異同：
可以使用 methods 來替代 computed，效果上兩個都是一樣的
但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值
而使用 methods ，在重新渲染的時候，函數總會重新調用執行
可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。
computed 屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> {{site}} </div> <script> var vm=new Vue({ el: '#demo', data: { name:"cyy", course:"學vue" }, computed: { // 計算屬性的 getter site: { //getter get:function(){ return this.name+this.course }, //setter set:function(data){ var arr=data.split(" ") this.name=arr[0] this.course=arr[1] } } } }) vm.site="cyy2 也在學習vue呢" document.write(vm.name+"<br>"+vm.course) </script>
在運行 vm.site = 'cyy2 也在學習vue呢'; 時，setter 會被調用， vm.name 和 vm.url 也會被對應更新
如果沒有設置set，那麼vm.name 和 vm.url 不會被對應更新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> {{site}} </div> <script> var vm=new Vue({ el: '#demo', data: { name:"cyy", course:"學vue" }, computed: { // 計算屬性的 getter site: function(){ //getter return this.name+this.course } } }) vm.site="cyy2 也在學習vue呢" document.write(vm.name+"<br>"+vm.course) </script>
