13518219792
这篇文章主要介绍Vue.js中computed和methods之间的区别是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
官方文档中已经有对其的解释了，在这里把我的理解记录一下。
computed 的使用场景
HTML模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。
比如这种
Reversed message: "{{ message.split('').reverse().join('') }}"
在这个地方，模板不再是简单的声明式逻辑。这里是想要显示变量 message 的翻转字符串，而这种包含复杂逻辑处理的表达式，都应当使用计算属性。
computed 和 methods 的区别
1. computed是属性调用，而methods是函数调用
这意味着在HTML的插值里
computed定义的方法是以属性访问的形式来调用，如 {{reversedMessageComputed}}
methods定义的方法，则要加上 () 来调用，如 {{reversedNameMethod()}} ，否则视图中会渲染出如下内容
function () { [native code] }
2. computed带有缓存功能，而methods不是
这里我引用一下官方文档的说明
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
Reversed message: "{{ reversedNameMethod() }}"
Reversed message: "{{ reversedMessageComputed }}"
// javascript
var vm = new Vue({
el: '#root',
data: {
name: 'Alex',
message: 'Hello'
},
methods: {
reversedNameMethod: function () {
return this.name.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageComputed: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})上面的例子中，缓存意味着只要 message 还没有发生改变，多次访问 reversedMessageComputed 计算属性会立即返回之前的计算结果，而不必再次执行函数。而 reversedNameMethod() 方法，每次调用都会重新执行函数。
但同时需要注意，这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
// javascript
computed: {
now: function () {
return Date.now()
}
}now 的值将在Vue实例化时生成，并且不再改变。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
computed其他说明
computed 和 methods 不可以重名
Vue会把 methods 和 data 里的东西，全部代理到Vue生成的对象中，这会将computed中重名属性覆盖
以上是Vue.js中computed和methods之间的区别是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
