Vue-7- 计算属性和方法的区别

2022 年 6 月 12 日
本文字数：913 字
阅读完需：约 3 分钟

计算属性和方法的区别

接上节内容，我们将需要在模板插值表达式中复杂的计算使用 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 装饰的方法。

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/85c60bd330e579a7ff2f7db11】。文章转载请联系作者。

Python研究所

关注

公众号:Python研究所 2018.10.14 加入

云原生领域技术分享。

发布

暂无评论

创作场景

Vue-7- 计算属性和方法的区别

计算属性和方法的区别

实例

计算属性

代码-HTML

代码-JS

页面效果

过程分析

方法

代码-HTML

代码-JS

页面效果

过程分析

Tip

Python研究所

评论