vue中methods和computed有什么区别

最新推荐文章于 2023-10-11 15:26:26 发布

西瓜味儿的小志

最新推荐文章于 2023-10-11 15:26:26 发布

阅读量560

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/Destiny_shine/article/details/114668219

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这里先给出结论：

可以将同一函数定义为一个methods方法，亦可以定义为一个computed计算属性，两种方式的最终结果是完全相同的。不同之处在于：

计算属性 computed 是基于它们的依赖缓存，只在相关响应式依赖发生改变时才会重新调用求值，否则计算属性会只会直接返回之前的计算结果，而不必再次执。相反，每当触发重新渲染时，methods 函数总会重新调用执行。
在调用 methods 方法时需要有括号，而调用 computed 属性则不需要括号。

下面通过一个例子来观察一下：

<body>
<div id="app">
    <p>{{methodTest()}}</p>
    <p>{{methodTest()}}</p>
    <p>{{methodTest()}}</p>
    <p>{{computedTest}}</p>
    <p>{{computedTest}}</p>
    <p>{{computedTest}}</p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
          message: "我是消息"
        },
        methods: {
            methodTest() {
                console.log(this.message + " methods")
            }
        },
        computed: {
            computedTest() {
                console.log(this.message + " computed")
            }
        }
    })
</script>
</body>

最后打印结果为：
在这里插入图片描述
分析：
上述例子中，调用了三次 methodTest 以及三次 computedTest，从打印结果可以看出，打印了三次 methods信息，而 computed 信息仅打印了一次。

这说明，在Vue实例化的时候，computed 定义 computedTest 方法会做一次计算，得到一个返回值，之后，只要 computedTest 方法依赖的 message 数据不发生改变，computedTest 方法是不会重新计算的，也就是说再次调用 computedTest 时会直接拿到返回值，而不是重新计算得到结果。相反，methods 定义的方法是以函数调用的形式访问，每次重新渲染都会重新计算得到结果。

computed计算属性优点是什么呢？或者说我们为什么需要缓存？官网也有相关解释：
假设有一个性能开销很大的计算属性 A，它可能需要遍历一个很大的数组做大量运算。同时可能有其他的计算属性依赖于 A。试想一下，如果没有缓存，我们就将不可避免的多次执行 A 的 getter，导致效率低下。当然，如果你不希望有缓存，那么也可以使用方法来替代。

OK，大伙儿明没明白？明白了吧。

西瓜味儿的小志

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中methods和computed有什么区别

这里先给出结论：    可以将同一函数定义为一个methods方法，亦可以定义为一个computed计算属性，两种方式的最终结果是完全相同的。不同之处在于：计算属性 computed 是基于它们的依赖缓存，只在相关响应式依赖发生改变时才会重新调用求值，否则计算属性会只会直接返回之前的计算结果，而不必再次执。相反，每当触发重新渲染时，methods 函数总会重新调用执行。在调用 methods 方法时需要有括号，而调用 computed 属性则不需要括号。下
复制链接

扫一扫