《Vue进阶教程》第二十课：lazy懒执行
往期内容：
《Vue进阶教程》第九课：watch()函数的高级使用
《Vue进阶教程》第十课：其它函数
《Vue进阶教程》第十一课：响应式系统介绍
《Vue进阶教程》第十二课：实现一对多
《Vue进阶教程》第十三课：实现依赖收集
《Vue进阶教程》第十四课：改进桶结构
《Vue进阶教程》第十五课：深入完善响应式系统之模块化
《Vue进阶教程》第十六课：深入完善响应式系统之单例模式
《Vue进阶教程》第十七课：支持分支切换
《Vue进阶教程》第十八课：避免死循环
《Vue进阶教程》第十九课：computed初步实现
1) 什么是懒执行
对计算属性而言, 默认不会执行计算方法(副作用函数). 只有访问其value属性时, 才会执行计算方法
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<script>
const { reactive, computed } = Vue
const state = reactive({ firstname: 'xiao', lastname: 'ming' })
const fullname = computed(() => {
console.log('默认不执行, 只有当访问fullName.value时执行')
return state.firstname + state.lastname
})
setTimeout(() => {
fullname.value
}, 1000)
</script>
</body>
</html>
2) 具体实现
在我们自己写的源码中, 每次在注册副作用函数时, 默认都会执行一次.
解决方案
为了解决上述问题.
可以考虑给注册副作用函数effect加入配置项, 扩展effect的功能, 控制是否需要在注册时立该执行副作用函数
修改effect
function effect(fn, options = {}) {
if (typeof fn !== 'function') return
const _effect = new RectiveEffect(fn)
if (!options.lazy) _effect.run() // 修改
return _effect
}在计算属性中注册副作用函数时, 加入lazy:true的配置项, 表明注册时不需要立即执行
优化computed
function computed(fn) {
// 这里先只考虑fn是函数的情况
const _effect = effect(fn, {
lazy: true, // 修改
})
return {
get value() {
return _effect.run()
},
}
}