Vue-01:计算属性缓存 vs 方法

需求:

根据data里的库存(cout)来修改按钮的可用状态和按钮文本

方法一:

<div id="root">
        <h1>库存:{{count}}</h1>
        <div>{{tip}}</div>
        <button @click="count--" v-bind:disabled="count<=0">{{tip}}</button>
</div>

el: '#root',
        data() {
            return {
                count: 2
            }
        },
        computed: {
            tip() {
                console.log("执行了一次computed方法");
                return this.count > 0 ? "购买" : "没货"
            }
        }

方法二:

<div id="root">
        <h1>库存:{{count}}</h1>
        <div>{{tip()}}</div>
        <button @click="count--" v-bind:disabled="count<=0">{{tip()}}</button>
</div>

        el: '#root',
        data() {
            return {
                count: 2
            }
        },
        methods: {
            tip() {
                console.log("执行了一次methods方法");
                return this.count > 0 ? "购买" : "没货"
            }
        }

两种方式在结果上确实是完全相同的:

  

不同之处:

控制台里使用计算属性实现只打印了一次提示信息,使用方法实现打印了两次提示信息

在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要count不改变，无论多少次访问 ,都会立即返回先前的计算结果，而不用重复执行 getter 函数。

在这个例子里:
计算属性在第二次{{tip}}的时候沿用了第一次计算的结果

相比之下，方法调用总是会在重渲染发生时再次执行函数。

每次点击购买count发生改变,计算属性都只会计算一次,button里的tip信息会沿用<div>{{tip}}</div>里计算好的tip,而方法调用总会固定执行两次tip()

如果计算逻辑更复杂,每次重渲染非常耗性能,确定不需要缓存，那么也可以使用方法调用。