【大前端】说说vue的计算属性

您所在的位置：网站首页 › vue计算属性使用场景 › 【大前端】说说vue的计算属性

【大前端】说说vue的计算属性

2023-07-05 17:37| 来源: 网络整理| 查看: 265

说说vue的计算属性为什么出现计算属性功能便于维护

这里我们举vue官网的例子

对于属性的附加运算完全可以这样写在模板里，不用多写什么方法。但是模板设计的初衷是用于简单运算如果模板中放入太多的逻辑会让模板过重以致难以维护

所以任何复杂逻辑，你可以使用方法，计算属性或者watch 区别下边来讲

执行效率

计算属性是基于它们的响应式依赖进行缓存的。只有他们依赖的值发生变化时才会重新求值。相比之下：每当触发重新渲染，调用方法将总会执行函数这就可以看出计算属性的效率高效

开发效率

同样这里我们用vue官网的例子：

同样是求根据firsttName 和lastName求fullName

用watch（侦听属性）来做

export default { name: 'App', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }

可以看出必须对两个属性都做监听，才能实现修改任意一个Name都可使fullName改变的需求

下面是用computed属性来做：

export default { name: 'App', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }

可以看到一个方法，一行代码就可以实现了。

可能有人会说：这里用模板语法不更好吗

确实，这里用模板语法更好，因为所需计算量少，而且用模板语法能够更加高效。但是这只是个例子。

好了，下边总结一下模板语法的应用场景

计算属性应用场景所需计算量较大，速度要求快业务逻辑较复杂，便于维护牵扯data属性较多，可以减少代码量同时效率较高计算属性的语法😀

上面说了那么多概念，是时候说说语法了

computed(计算属性)和data平级

第一种：

computed:{ dataName(){ return data } }

第二种：

computed:{ dataName:{ get(){ return val }, set(newValue){ //属性变化时要对属性执行的操作 } } }

watch属性后面再详讲

看到这了，不点个赞再去敲bug

【本文地址】

【大前端】说说vue的计算属性

【大前端】说说vue的计算属性

今日新闻

推荐新闻