1、在vue中methods和computed的作用都为相等的,但是运行原理却不同,那么我们来看一下为何原理不同,我们进行证实。
2、首先我们在data()return{}中创建两个初始化的数据值,分别为message和num。
3、之后我们先后分别创建methods和computed属性都写一个函数,分别为:reversedMessage() && reversedSttend() 在这里面我们分别都写上反转字符串的效果
4、之后我们在标签中进行中渲染,我们可以看到第一个是计算属性(computed) 第二个是methods属性 在computed属性中调用函数可以不加() 而methods则是必须要加上的 否则会报出错误
5、之后我们看效果: 那么差异是什么呢?不怕麻烦的小伙伴可以自己按照上发放的过程自己试一试非常,在这里我们就直接说出 methods与computed之间的差别,:methods和computed里的方法在初始化执行过后,只要任何值有更新,那么所有在computed计算属性里和其相关的值都会更新。methods只有在调用的时候才会执行对应的方法,不会自动同步数据。computed计算属性跟methods在内部的函数写起来没有什么区别,只是在调用的时候不一样。
6、总结:computed计算属性的缓存原理在我们处理大量数据的时候使用可以大大提高效率,不必在数据没有发生改变的时候重新获取数据的值,可直接获取到结果,并且只执行绑定依赖的方法。methods里方法在依赖的值改变后,只有设置触发才会重新执行methods里相关的方法。