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 计算属性和侦听器的资料请关注好吧啦网其它相关文章！
相关文章：
网公网安备