Vue之computed深度解析

一、什么是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