Vue组件的计算属性和普通属性的区别说明
作者:小猫虎儿~
这篇文章主要介绍了Vue组件的计算属性和普通属性的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
计算属性和普通属性的区别说明
计算属性关键词: computed
计算属性模板:
computed:{ type:{ get(){ //getter }, set(value){ //setter } } }
1.计算属性本质是包含getter和setter的方法。
2.当获取计算属性时,实际上是在调用getter方法。vue会收集计算属性的依赖,并缓存计算属性返回的结果。只有当依赖变化的时候才会重新进行计算。
3.方法没有缓存,每次调用方法都会导致重新执行。
4.计算属性的getter和setter参数固定:getter没有参数,setter只有一个参数。而方法的参数不限。
5.最重要的区别是含义上面的区别:计算属性也是一个数据,可以读取也可以赋值。而方法含义上是一个操作用于处理一些事情。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> {{ message.split('').reverse().join('') }} </div> <script> const app = { data() { return { message: 'ILOVEVUE!!' } } } Vue.createApp(app).mount('#app') </script> </body> </html>
运行结果:
!!EUVEVOLI
上例中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> </head> <body> <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> const app = { data() { return { message: 'ILOVEVUE!!' } }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } } Vue.createApp(app).mount('#app') </script> </body> </html>
运行结果:
原始字符串: ILOVEVUE!!
计算后反转字符串: !!EUVEVOLI
computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。