Vue 计算属性缓存和方法的区别：从另一段代码来看【vue3学习笔记】

首发自我的博客 zhangmaimai.com，可以访问获取更多内容与及时更新~
https://zhangmaimai.com/2021/08/20/vue-computed-caching-vs-methods/

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。 ——Vue3官方中文文档

最近在系统看vue3，看到计算属性这里，我就在想，似乎这和直接调用方法是一致的，那么他只是做了语法上的优化吗？

果然后面就告诉我了：是的结果是一样的，但是计算属性是基于响应依赖关系而缓存的。

虽然有些绕口，但是大概也能理解他的意思，即：就是说方法会在每次渲染的时候重新计算，而计算属性如果依赖的量没有变化，那么他会从缓存中调用他的结果，而非重新计算。

紧接着官方又给出了一段例子：

这也同样意味着下面的计算属性将不再更新，因为 Date.now () 不是响应式依赖：

computed: {now() {return Date.now()}
}

紧接着我又发现问题了，因为按他所说，这里如果我们分别调用一样内容的计算属性和函数渲染在网页中，将得到不同的结果，也就是当我们有:

<script src="https://unpkg.com/vue@next"></script>
<div id="app" ><p v-for="i in 3">Time return by method:{{getTime()}}</p><p v-for="i in 3">Time return by computed:{{getTimeComputed}}</p>
</div>
<script>
Vue.createApp({methods:{getTime(){return Date.now();}},computed:{getTimeComputed(){return Date.now();}}
}).mount('#app')
</script>

你应该会看到使用方法循环三次的内容应该是不同的，而使用计算属性是相同的。
但事实上我的输出结果是

Time return by method:1629390835396Time return by method:1629390835396Time return by method:1629390835396Time return by computed:1629390835396Time return by computed:1629390835396Time return by computed:1629390835396

他们都是一样的，于是我很奇怪，搜寻了很多文章，都没有讲到这个示例的问题。

想来想去，突然想到是否会是时间精度导致的呢？也就是它运行过快导致这个差异被后面的精度给略掉了。

于是把Date.mow()改为了performance.now()这是浏览器api中为了衡量性能的一个更高精度的时间（node中并没有哦）。

和JavaScript中其他可用的时间类函数（比如Date.now）不同的是，window.performance.now()返回的时间戳没有被限制在一毫秒的精确度内，相反，它们以浮点数的形式表示时间，精度最高可达微秒级。

这个时间戳实际上并不是高精度的。为了降低像Spectre这样的安全威胁，各类浏览器对该类型的值做了不同程度上的四舍五入处理。（Firefox从Firefox 59开始四舍五入到2毫秒精度）一些浏览器还可能对这个值作稍微的随机化处理。这个值的精度在未来的版本中可能会再次改善；浏览器开发者还在调查这些时间测定攻击和如何更好的缓解这些攻击。 —— MDN web docs 因此我们更多是借此特性来检测方法的重复运行。

于是我们就得到了

Time return by method:5518.70000000298Time return by method:5518.79999999702Time return by method:5518.89999999851Time return by computed:5519.20000000298Time return by computed:5519.20000000298Time return by computed:5519.20000000298

是的，这正是文档想让我们看到的效果！我们会看到方法的三次调用所得到结果并非一样的，而computed则全部一致。

注：这里经过在其他浏览器测试，发现部分手机浏览器对精度做了省略，例如夸克甚至直接小数部分只给了一位数，反而获取的也是一样的值，因此这里更推荐用后面的console.log衡量调用次数的差异。

当然由于性能关系，有时候你得到的结果也有概率是重复的，但是这比Date.now()要低得多。

因此我认为文档中这部分使用Date.now()举例并不是很直观，当然也有文章使用console.log()放入函数中，这样我们也可以更直观的看出运行时候的差异。

保持一样的html代码，将js部分修改为

Vue.createApp({methods:{getTime(){//return Date.now();console.log("methods~")return  performance.now();}},computed:{getTimeComputed(){//return Date.now();console.log("computed~")return  performance.now();}}
}).mount('#app')

我们会得到控制台中输出:

"methods~"
"methods~"
"methods~"
"computed~"

这样就很明显了。

你可以在codepen中自己试试:

See the Pen Computed Caching vs Methods by Max C. Foo ( @maxchang3) on CodePen.

Vue 计算属性缓存和方法的区别：从另一段代码来看【vue3学习笔记】相关推荐

【Vue】—计算属性缓存VS方法以及侦听器的区别
[Vue]-计算属性缓存VS方法以及侦听器的区别
vue修改计算属性的值_八.Vue计算属性
Vue计算属性前言我们要做的是springboot和vue.js所做的前后端分离的hr项目,所以从来没接触到vue的小伙伴,可以这篇文章学Vue入门,这一篇就够了模板内的表达式非常便利,但是设 ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
Vue计算属性（computed）和侦听器（watch）
Vue计算属性(computed)和侦听器(watch) 计算属性(computed) 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.所以不 ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
Vue - 计算属性
1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果场景: 一个变量的值, 需要用另外变量计算而得来语法: computed: {"计算属性名" ( ...
vue计算属性与监听器的区别
vue计算属性与监听器的区别计算属性(computed) 监听器(watch) 监听data中没有的值监听data中有的值使用时触发使用不会触发值有变化就触发值有变化就触发没有settt ...
Vue计算属性、方法、侦听器
文章目录一.基础计算模板二.计算属性computed 三.方法methods 四.侦听器watch 五.总结六.源码地址一.基础计算模板 <!DOCTYPE html> <h ...
vue 计算属性和方法
计算属性:(1)与函数的区别:多次访问依赖性不变的计算属性会立即返回之前的计算结果,而调用方法将总会再次执行函数.能监听对象内部属性的变化(2)计算属性中的方法不能作为事件的回调函数(3)script ...

Vue 计算属性缓存和方法的区别：从另一段代码来看【vue3学习笔记】

Vue 计算属性缓存和方法的区别：从另一段代码来看【vue3学习笔记】相关推荐

最新文章

热门文章