Vue.js中computed和methods的区别
时间：2023-04-02 22:01:20
HTML
在官方文档中已经有说明，在此记录下自己的理解。计算型使用场景HTML模板中复杂的逻辑表达式，应该将相关逻辑放到计算型属性中，以免逻辑过于繁重，难以维护。例如，这个
Reversedmessage:"{{message.split('').reverse().join('')}}"
在this这里，模板不再是简单的声明逻辑。这里是要显示可变消息的翻转字符串，这种包含复杂逻辑处理的表达式应该使用计算属性。computed和methods的区别1.computed是属性调用，methods是函数调用，也就是说在HTML插值中，computed定义的方法是以属性访问的形式调用的，比如{{定义的方法reversedMessageComputed}}方法，然后Add()调用，如{{reversedNameMethod()}}，否则会在视图函数中渲染下面的内容(){[nativecode]}2.Computed有缓存功能，但是方法不在这里。让我引用官方文档指出，计算属性是根据它们的依赖项进行缓存的。只有当依赖项发生变化时，它们才会被重新评估。
反向消息：“{{reversedNameMethod()}}”
反向消息：“{{reversedMessageComputed}}”
//javascriptvarvm=newVue({el:'#root',data:{name:'Alex',message:'Hello'},methods:{reversedNameMethod:function(){returnthis.name.split('').reverse().join('')}},computed:{//计算属性的getterreversedMessageComputed:function(){//`this`指向vm实例returnthis.message.split('').reverse().join('')}}})在上面的例子中，缓存的意思是只要消息没有变化，多次访问reversedMessageComputed计算属性会立即返回之前的计算结果无需再次执行它的功能。而reversedNameMethod()方法每次调用时都会重新执行该函数。但同时需要注意的是，这也意味着下面的计算属性将不再被更新，因为Date.now()不是反应式依赖：//javascriptcomputed:{now:function(){returnDate.now()}}now的值会在Vue实例化时生成，永远不会改变。相反，只要触发重新渲染，调用方法将始终再次执行该函数。Computed其他注意事项Computed和methods不能同名Vue会将methods和data中的所有东西代理给Vue生成的对象，会覆盖computed中的同名属性
