Comments (1)
关于计算属性的缓存,在网上看过挺多篇文章并没有讲的很清楚,今天我们从源码来分析一下它这个缓存到底是怎么做的。
首先我们知道 当依赖值a改变的时候 a会触发dep.notify 这个dep里收集了计算属性sum的watcher 会触发这个watcher的update, 我们来看update里关键的节选
update () {
if (this.computed) {
....
this.getAndInvoke(() => {
this.dep.notify()
})
}
}
我们会把触发渲染watcher更新的this.dep.notify包裹在 this.getAndInvoke内部,那我们来看看那 this.getAndInvoke做了什么
getAndInvoke (cb: Function) {
const value = this.get()
if (
value !== this.value ||
isObject(value) ||
this.deep
) {
const oldValue = this.value
this.value = value
this.dirty = false
if (this.user) {
try {
cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
cb.call(this.vm, value, oldValue)
}
}
}
首先会调用this.get() ,获取到当前计算属性最新的值,然后去和上次计算属性的值进行比较,只有在值发生变化以后才回去执行接下来的回调, 才会去触发视图的重新渲染,这也就是为什么说新版的计算属性是更多计算,更少的更新。
from blogs.
Related Issues (20)
- Hi
- Dan Abramov 接受油管 UP 主的面试挑战,结果差点没写出来居中……? HOT 3
- 【开源自荐】推荐一个每日更新的前端面试题库
- Vuex 4.0 正式发布!新年官方生态齐聚一堂
- 尤雨溪:关于 Vue3 和生活,想和前端们聊聊这些
- 浅谈 Vite 2.0 原理,依赖预编译,插件机制是如何兼容 Rollup 的? HOT 1
- TypeScript 中你不一定知道的 top types,在用 any 之前先试试 unknown?
- 给 Antd Table 组件编写缩进指引线、子节点懒加载等功能
- 如何编写神奇的「插件机制」,优化基于 Antd Table 封装表格的混乱代码
- 打破 React Hook 必须按顺序、不能在条件语句中调用的枷锁 HOT 2
- VueConf 2021 抢先看,Evan You 和你聊聊 Vue 的未来
- [RFC] 关于 Vue 3 的 IE11 支持
- 这个写法有问题,cd之间不会相隔1s执行
- Vite 太快了,烦死了,是时候该小睡一会了。
- 我的学习方法是每天看 10 个 NPM 模块? HOT 9
- 如何在大型代码仓库中删掉 6w 行废弃的文件和 exports? HOT 2
- 未来前端构建工具链的故事里,会有这个 97 年的韩国小哥?
- 想进字节跳动的新生代前端民工们,都提出了什么问题?
- 应用性能前端监控,字节跳动这些年经验都在这了
- Nuxt 3 来了!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blogs.