基本信息

---

下载

文档摘要

---

第

Vue组件的计算属性和普通属性的区别说明

上例中模板变的很复杂起来，也不容易看懂理解。

接下来我们看看使用了计算属性的实例：

!DOCTYPEhtml

html

head

metacharset=utf-8

title例子/title

scriptsrc=/vue/3.0.5/vue.global.js/script

/head

body

divid=app

p原始字符串:{{message}}/p

p计算后反转字符串:{{reversedMessage}}/p

/div

script

constapp={

data(){

return{

message:ILOVEVUE!!

computed:{

//计算属性的getter

reversedMessage:function(){

//`this`指向vm实例

returnthis.message.split().reverse().join()

Vue.createApp(app).mount(#app)

/script

/body

/html

运行结果：

原始字符串:ILOVEVUE!!

计算后反转字符串:!!EUVEVOLI

computedvsmethods

我们可以使用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用methods，在重新渲染的时候，函数总会重新调用执行。

可以说使用computed性能会更好，但是如果你不希望缓存，你可以使用methods属性。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。