vue 计算属性和侦听器的使用小结

时间：2021-05-26

1. 计算属性和侦听器

1.1 计算属性

<!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('') } } }); </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 计算属性和侦听器的资料请关注其它相关文章！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章