Vue3中计算属性和方法的区别

当计算属性和方法同时使用了引用变量且在界面中呈现时，

• 引用变量发生变化，如果在界面中呈现，会自动更新界面内容
• 引用变量发生变化，触发计算属性重新计算其值，计算属性值变化，因为是引用属性，也会触发界面更新，各执行一次
• 引用变量发生变化，界面直接引用方法呈现计算的结果时，只会触发界面更新，重新执行方法获取结果

思考：如果计算方法的结果赋给一个引用属性，界面再呈现引用属性，是否与计算属性相同？

• 计算方法不会因其所使用的引用属性值发生变而自动重计算，即便计算了，也无处存放结果
• 如果计算属性和计算方法内都是一个累加操作，那么是否多次调用计算方法的结果各不同呢？

引用属性变化触发界面更新

• 对于引用属性是读值，
• 对于计算属性也是读值并不会调用计算过程，
• 对于计算方法则是调用计算方法的过程

引用属性变化触发更新链可以是这样的

• 先触发使用它的计算属性更新属性值
• 再触发使用引用属性的界面更新，
• 计算属性值更新也会触发使用它的界面更新，
• 计算方法即便重计算，结果也无处存放，可能不会触发重计算
• 但计算方法内部使用到的引用属性变化，会触发使用计算方法的界面更新，更新导致计算方法被执行计算获取结果

总结：

• 计算属性是逐级触发并逐级递进更新，
• 计算方法是逐级触发但无结果更新，直到对计算方法的调用处才调用返回结果更新