computed执行过程

computed计算属性中的函数一般都是运算，较简单的函数，最大的特点是具备缓存。

首先我们写一段代码，然后进行分析：

    更改computed数据

    
{{getValue}}
    
{{num}}

    点击
    
{{count}}

    点击

下面是js代码：

  new Vue({
        el:"#app",
        data:{
            value:"丑小鸭",
            num:0,
            count:0
        },
        computed:{
            getValue:{
                get:function () {// 获取数据时执行
                    this.num = this.num+=1;
                    return this.value;
                },
                set:function (params) {// 更改数据时执行
                    alert("更改了");
                    this.value = params;
                }
            }
        },
        methods:{
            tempMethod(){
                this.count = this.count+=1;
            }
        }
    })

这是第一次执行时渲染的结果：

 页面渲染时执行了一次getValue，此时num的值加1，value的值不变，然后computed会把执行结果渲染到页面上，于是页面上的num值为1，而methods需要点击触发，所以count的值不变，接下来，我们点击页面第二个和第三个按钮，

此时，无论点击哪一个，都会执行一次methods里面的tempMethod，所以每点击一次，count的值都会加1，接下来我们点击第一个按钮：

 此时，value的值被改变，也就是说set方法被执行了，同时发现，num的值也加1了，看上去好像没问题，接下来我们把代码改一下：

    更改computed数据
    
{{getValue}}
    
{{num}}

    点击
    
{{count}}
    点击

我们将传的值改为value的值，现在点击第一个按钮，结果应该是不变的，num的结果应该为1，因为页面加载的时候执行一次，点击按钮的时候有执行一次，接下来看效果：

我们看到，点击事件触发了，但是num的值依旧是1，这是为什么呢？ 

接下来总结一下computed的执行过程：

computed在第一次执行时，将num+1，此时num=1，并且将执行的结果放入缓存中，第二次执行时，会判断计算属性有没有被更改，如果执行完set后，Value没有被更改，那么就直接去缓存拿数据，此时缓存里存放的是第一次执行的结果，如果执行完，value的值发生改变，那么会重新执行函数，并且将第二次执行结果更新到缓存中，此时num值就为2。

总结：

computed里面的get函数，只有在set执行完并且值发生更改时才会执行，否则就去缓存里拿数据。