vue 計算屬性和偵聽器的使用小結
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><p>{{ reversedMessage }}</p> </div> <script> new Vue({el: ’#app’,data: {message: ’hello’},computed: {reversedMessage: function () {return this.message.split(’’).reverse().join(’’)}/*// 相當于reversedMessage: {get(){return this.message.split(’’).reverse().join(’’)}}*/} }); </script> </body></html>
解釋：我們在屬性computed中定義了計算屬性reversedMessage，這里提供的函數將作為計算屬性reversedMessage的getter函數。
1.2 setter計算屬性默認只有getter，不過我們可以提供一個setter。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><p>{{ reversedMessage }}</p><input type='text' v-model='reversedMessage' /> </div> <script> new Vue({el: ’#app’,data: {message: ’hello’},computed: {reversedMessage: {get(){return this.message.split(’’).reverse().join(’’)},set(value){this.message = value.split(’’).reverse().join(’’)}}} }); </script> </body></html>1.3 緩存
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><p>{{ reversedMessage }}</p><p>{{ reversedMessage1() }}</p> </div> <script> new Vue({el: ’#app’,data: {message: ’hello’},methods: {reversedMessage1: function(){return this.message.split(’’).reverse().join(’’)}},computed: {reversedMessage: function () {return this.message.split(’’).reverse().join(’’)}} }); </script> </body></html>
注意：雖然通過計算屬性和方法，都可以達到同樣的效果，但是計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。
1.4 偵聽屬性通過Vue實例的watch屬性可以偵聽數據的變化。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><button @click='reverse=!reverse'>反轉</button> </div> <script> new Vue({el: ’#app’,data: {message: ’Vue’,reverse: false},watch: {// message: function(newVal, oldVal){reverse: function(newVal){console.log(newVal)this.message = this.message.split(’’).reverse().join(’’)}}, }); </script> </body></html>
我們可以通過實例屬性vm.$watch達到同樣的效果。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><button @click='reverse=!reverse'>反轉</button> </div> <script> var vm = new Vue({el: ’#app’,data: {message: ’Vue’,reverse: false} });// vm.$watch(’reverse’, function (newVal, oldVal) {vm.$watch(’reverse’, function (newVal) {console.log(newVal)this.message = this.message.split(’’).reverse().join(’’)}); </script> </body></html>
以上就是vue 計算屬性和偵聽器的使用小結的詳細內容，更多關于vue 計算屬性和偵聽器的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備