Vue—关于computed（computed属性中return函数的问题）

1.在后台项目中，无意中遇到有人在computed中这样写代码：computed:{getName(){returnfunction(){return"张散”;};},},这段代码看似没问题，实际上却违背了computed的设计初衷。之所以设计computed是为了简化模板中冗长臭臭的计算逻辑，让模板代码看起来更简洁。它易于维护，并且根据响应式依赖项缓存计算属性以优化性能。2.computedattributes介绍computedattributes官方介绍如下：文档地址：https://cn.vuejs.org/v2/guide...为什么上面的代码违背了computed的设计初衷？我们先看一下computed和methods的区别，然后才能解释这个问题。官方说明如下：文档：https://cn.vuejs.org/v2/guide...也就是说，虽然两者效果一样，但是computed会基于响应式依赖进行缓存，methods会不对，我们来验证一下：3.练习测试先创建computedand方法，打印log，然后在页面调用几次页面运行结果如下：控制台输出结果如下：结果可以看出，虽然模板中引用了4次computed属性computed_getName和方法method_getName，但是computed_getName只触发了一次，而method_getName方法被触发4次后，验证了computed具有缓存功能的特点如果我们更改计算属性并将其替换为开头提到的返回函数怎么办？页面运行结果如下：控制台输出结果如下：结果很明显，返回函数之后，如果想得到计算结果，必须调用这个计算函数（相当于调用方法，只是定义方法的位置放在computed中），缓存的作用就没有了。翻翻Vue官方文档：为什么需要缓存？假设我们有一个性能开销很高的计算属性A，它需要遍历一个巨大的数组并进行大量计算，然后我们可能还有其他依赖于A的计算属性。如果没有缓存，我们将不可避免地执行多次A的getter！如果您不想缓存，请改用方法。那么，假设本例中的getName是一个高开销的计算属性，现在已经失去了缓存的作用，是否可以按照官方的约定，改用方法呢？另一个原因是计算属性的创建步骤更复杂。有兴趣的可以参考下面这篇文章学习（偷懒，有现成的就贴在这里，轻点...）：https://cloud.tencent.com/dev...而方法的创建比较简单，源码如下：去除了很多容错判断，其实就是遍历所有的方法，挂载到实例上vm，如下：functioninitMethods(vm,methods){varprops=vm.$options.props;for(varkeyinmethods){//省略其他代码vm[key]=typeofmethods[key]!=='function'?noop:bind(方法[键],vm);}}有时候计算需要依赖模板数据中的某个状态，想通过在calculated属性中返回一个函数来传递参数，这样不仅可以利用computedcache的特性优化内存使用，还可以模板中简化了大量的计算逻辑，虽然思路不错，但还是需要对computed有一个理性的认识。因此，如果你还看到有人对computed中的return函数进行刁钻的操作，你知道怎么办了吗？4.总结计算属性适用于简化模板逻辑，具有缓存特性。用得好绝对是神器。计算属性中returnfunction的作用与method一致，但是性能开销比method高很多。本文由博客发布平台OpenWrite发布！