钩子函数的特点
Vue 生命周期钩子函数是在组件生命周期中执行的特定函数。
这些钩子函数允许你在组件不同的生命周期阶段插入自定义的逻辑代码。
Vue 提供了一组预定义的生命周期钩子函数，每个钩子函数在组件生命周期的不同阶段被调用。
源码中如何注册、实现钩子函数？
代码示例
const onBeforeMount = createHook('bm' /\* BEFORE\_MOUNT \*/)
const onMounted = createHook('m' /\* MOUNTED \*/)
const onBeforeUpdate = createHook('bu' /\* BEFORE\_UPDATE \*/)
const onUpdated = createHook('u' /\* UPDATED \*/)
const onBeforeUnmount = createHook('bum' /\* BEFORE\_UNMOUNT \*/)
const onUnmounted = createHook('um' /\* UNMOUNTED \*/)
const onRenderTriggered = createHook('rtg' /\* RENDER\_TRIGGERED \*/)
const onRenderTracked = createHook('rtc' /\* RENDER\_TRACKED \*/)
const onErrorCaptured = (hook, target = currentInstance) => {
injectHook('ec' /\* ERROR\_CAPTURED \*/, hook, target)
}
除去onErrorCaptured其他的钩子函数都是直接调用createHook。
createHook方法源码解析
createHook对injectHook进行封装。
const createHook = function(lifecycle) {
return function (hook, target = currentInstance) {
injectHook(lifecycle, hook, target)
}
}
柯里化的封装过程带来的优势
- 提高函数的复用性：可以将原本接收多个参数的函数转变为接收部分参数的函数。这样，我们可以复用具有相同生命周期的钩子函数的逻辑，只需传入不同的目标实例即可。这种封装方式使得代码更加灵活，易于扩展和维护。
- 简化函数调用：可以将原本需要在调用时传递的参数提前传入并固定，从而简化函数调用。在这个例子中，createHook 函数返回的函数只需要传递 hook 和可选的 target 参数即可，无需再重复传递 lifecycle 参数。
- 隐藏实现细节：可以隐藏一些实现细节，使得函数调用更加简洁，同时也减少了外部对内部函数的直接访问。这种封装方式可以提高代码的可维护性和安全性
injectHook方法源码解析
function injectHook(type, hook, target = currentInstance, prepend = false) {
// 从目标组件实例中获取相应的钩子函数数组
const hooks = target[type] || (target[type] = [])
// 封装传入的钩子函数,用于添加实例检查、错误处理等逻辑
const wrappedHook = hook.__weh ||
(hook.\_\_weh = (...args) => {
// 检查目标组件是否已卸载
if (target.isUnmounted) {
return
}
// 停止依赖收集,避免执行钩子时产生副作用
pauseTracking()
// 设置当前运行组件实例为目标实例
setCurrentInstance(target)
// 调用传入的钩子函数
const res = callWithAsyncErrorHandling(hook, target, type, args)
// 重置当前组件实例
setCurrentInstance(null)
// 恢复依赖收集
resetTracking()
return res
})
// 根据传入的参数将封装后的钩子推入数组前或后
if (prepend) {
hooks.unshift(wrappedHook)
} else {
hooks.push(wrappedHook)
}
}
这样的设计非常易于理解，因为生命周期的钩子函数在组件的不同阶段执行，所以这些钩子函数需要保存在当前组件实例上。
这样，后续就可以通过不同的字符串键查找对应的钩子函数数组，并执行相应的逻辑。
基础学习：
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计：HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互：JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
