计算属性
作⽤:使⽤计算属性可以来处理⼀些复杂逻辑的数据
语法关键字:
computed
特点:
计算属性虽然写的像⽅法,但是它的使⽤⽅式和属性⼀样,属性怎么⽤,它就怎么⽤
示例
![](https://img-blog.csdnimg.cn/direct/8b0c870828fe4025b313b71e27ef72c9.png)
为什么要使⽤计算属性:
![](https://img-blog.csdnimg.cn/direct/9fe44fbb0d8045669b77b70c12576f14.png)
上述代码执⾏的时候发现,当我们点击按钮的时候,num执⾏了加1的操作,但是同样getFullName也
执⾏了⼀次操作。即每次点击都会alert 我被点击了。原因是,每次num执⾏加1后Vue会重新渲染⻚⾯⽽vue分不清楚⽅法⾥⾯到底在执⾏什么,所以每次刷⾏Dom,所有的⽅法都会被执⾏⼀遍。这个时候我们就应该使⽤计算属性来解决这个问题。
解决:
![](https://img-blog.csdnimg.cn/direct/0d12245a5afa4b04b50f3e885f4fe503.png)
解决原理:vue会分析计算属性⾥⾯的⽅法,分析代码中依赖哪些属性值,如果这些属性值中有某个或 全部发⽣变化的话,那么这个⽅法才会重新执⾏,否则,不会执⾏这个⽅法。
总结就是计算属性执⾏的时机是:初始化显示或依赖的属性发⽣了变化
计算数据的get与set:
示例:需求是当我们修改全名时,姓和名也要跟着修改
![](https://img-blog.csdnimg.cn/direct/bfcc22f0611544e9994f3c1dbff1501b.png)
![](https://img-blog.csdnimg.cn/direct/66d4f2adc4244f7095a61fe752ff7e31.png)
计算属性可以使⽤js中属性的get和set⽅法 其中get⽅法是当获取当前属性值时⾃动调⽤, 将返回值(根据相关的其它属性数据)作为属性值 set⽅法是当属性值发⽣了改变时⾃动调⽤, 监视当前属性值变化, 同步更新相关的其它属性值。