vue中的methods和computed的区别
首先问一个问题，当我们在模板中来显示一份经过对数据进行复杂计算之后的结果时，我们有两种结果方案:
- 计算属性
- 函数
那么我们应该如何选择呢？
- methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
- computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行,计算属性会做缓存，提高渲染的性能
下面用一个案例来比较一下两者的区别
<template><div id="#app"><p>函数{{ fn() }}</p><p>函数{{ fn() }}</p><p>函数{{ fn() }}</p><hr /><p>计算属性{{ com }}</p><p>计算属性{{ com }}</p><p>计算属性{{ com }}</p></div>
</template><script>
export default {data() {return {num1: 10,num2: 100,};},methods: {fn() {console.log("methods中的函数被调用了");return this.num1 * 3;},},computed: {com() {console.log("computed中的函数被调用了");return this.num2 * 3;},},
};
</script><style>
</style>
效果图如下
对于普通的函数，在页面上用到了三次，它就会执行三次,但是计算属性就不一样，如果计算属性所依赖的数据项并没有发生变化，则就算使用多个计算函数，其函数也只执行一次, 因为它把结果缓存起来了,由于计算属性有缓存，虽然在页面上用到三次，但它的函数体只执行一次。
总结：
1.computed是响应式的，methods并非响应式。
2.computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。
3.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的
4.调用方式不一样，computed定义的成员像属性一样访问，例如上面的{{com}},methods定义的成员必须以函数形式调用,例如上面的{{fn()}}
在我们的实际开发中，有时很难去确定具体用computed还是methods，因为这两种方法最后的到的结果是一样的，但是他们的原理和用法却完全不同，比如：我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两种方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！