小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

计算属性和方法的区别

接上节内容，我们将需要在模板插值表达式中复杂的计算使用 Vue 的计算属性进行了简化，可能你已经注意到，Vue 的计算属性和 Vue 中的方法很像，只是计算属性的使用类似变量，方法的使用需要加上括号。

更重要的是，计算属性是依赖缓存的，只有属性值发生变化的时候，计算属性才会重新触发调用。而方法不依赖缓存，在每次触发渲染时，方法都会被调用。

实例

计算属性

代码-HTML

    <div id="app1">
       phyger的年龄是多少？
       <br>
       {{ age }}
    </div>

代码-JS

    <script>
        var integer
        var app = new Vue({
            el: "#app1",
            data: {
                birth: 1992
            },
            computed: {
                age: function(){
                    console.log('computed start...')
                    return 2021-this.birth
                }
            }
        })
    </script>

页面效果

过程分析

多次获取计算属性 age 的值，你会发现，计算属性只有在初识渲染的时候调用过一次，后面两次计算属性均为被调用。因为计算属性的值未发生变化。

方法

代码-HTML

    <div id="app1">
        phyger的年龄是多少？
        <br>
        {{ agef() }}
     </div>

代码-JS

    <script>
        var integer
        var app = new Vue({
            el: "#app1",
            data: {
                birth: 1992
            },
            computed: {
                age: function(){
                    console.log('computed start...')
                    return 2021-this.birth
                }
            },
            methods: {
                agef: function(){
                    console.log('method start...')
                    return 2021-this.birth
                }
            }
        })
    </script>

页面效果

过程分析

多次获取 agef()的返回值，意料之中，每次方法都会被调用。

Tip

其实计算属性和方法的区别就类似 Python 中的方法和被@property 装饰的方法。

以上就是今天的全部内容了，感谢您的阅读，我们下节再会。