Vue之computed深度解析

原创已于 2022-05-17 09:06:15 修改 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-05-16 19:48:24 首次发布

本文详细介绍了Vue.js中Computed属性与Methods的区别。Computed用于创建计算属性，其内部的函数在首次调用后会被缓存，只有依赖数据变化时才重新计算。而Methods中的函数每次调用都会执行。文中还通过示例解析了Computed的getter和setter，强调了getter必须有返回值。了解这些差异有助于优化Vue应用的性能。

一、什么是computed

computed是一个计算属性和methods一样可以存放函数。

二、computed和methods的不同

1.computed是存放一些关于运算的函数，而methods存放的是逻辑之类的函数

2.computed的里面的函数，在第一次调用的时候，会直接执行（执行成功后，会存放到缓存里面去），但在第二次调用的时候，只要数据没有发生改变，会直接从缓存里面获取数据。只要数据没改变就只会执行一次

而methods是每次调用都会执行

三、剖析computed

我们写的computed里面的函数一般都是这样的格式

computed:{
                getValue(){
                    return this.value;
                }
            }

其实这只是简写形式，computed里面有二个属性，我们写的常规写法都是直接调用getter

getter：获取数据【只要使用了计算属性，都是直接调用getter函数，也称get函数】

setter：设置数据【当数据发生修改的时候，会执行setter函数，也称set函数】

 computed:{
            getAdds:{
                //当获取到数据的时候，才会执行，而且如果数据没有发生变化
                //还是会调用缓存里面的数据
                //用get的时候，必须有返回值return
                get:function() {
                    this.num = this.num+=1
                    return this.text
                },
                //更改数据的时候，才会执行，
                set:function (news) {
                    this.text = news
                }
            },
        }

注意：get函数，必须有return