vue中计算属性的缓存特性

举例代码如下

<script>
        let vm = new Vue({
            methods:{
                getTimeA(){
                    return Math.random()
                }},
            computed:{
                getTimeB(){
                    return Math.random()
                }
                },
        });
        console.log(vm.getTimeA())
        console.log(vm.getTimeA())
        console.log(vm.getTimeA())
		console.log(“-------------------”)
        console.log(vm.getTimeB)
        console.log(vm.getTimeB)
        console.log(vm.getTimeB)
</script>

这里分别使用methods与computed定义一个方法和一个计算属性，结果如下：

由此可见methods定义的方法在每次调用时都会进行一次运算，而computed定义的计算属性在进行第一次访问后结果就固定下来，后续进行访问结果也不会发生变化。
同时，computed计算属性的值依赖于响应式数据，当数据发生变化时，也会进行重新的计算。
同时要区分缓存和响应式依赖的区别，那么什么是响应式依赖呢？
举个例子代码如下：

<script>
        let square = {length:2}
        let vm = new Vue({
            data:square,
            computed:{
                area(){
                    return this.length * this.length
                }
            }
        });
        console.log(vm.area)
        
        vm.length = 3
        
        console.log(vm.area)
        
        </script>

结果如下所示：

在上述代码块中可见area计算属性是依赖于lenght这个属性的，而lenght属性是经过vue.js处理的响应式属性，所以计算属性会随着依赖属性的变化而变化，同时计算属性仍具有缓存的特性，仍是上面的例子如下：

<script>
        let square = {length:2}
        let vm = new Vue({
            data:square,
            computed:{
                area(){
                    return this.length * this.length * Math.random()
                }
            }
        });
        console.log(vm.area)
        console.log(vm.area)
        console.log(vm.area)
        
        vm.length = 3
        
        console.log(vm.area)
        console.log(vm.area)
        console.log(vm.area)
        
        </script>

结果如下：

有结果可见缓存特性依旧存在。
结论：计算属性最重要的就理解它的响应式特性。当一个计算属性依赖于响应式属性时，计算属性会随着依赖的属性变化而变化，变化完成后所得到的值便会缓存下来，知道下一次依赖的属性的变化。