目录结构

Vue 2的源码采用典型的模块化结构，主要包含以下核心模块：

• core: 核心代码，包含响应式系统、虚拟DOM、组件系统等
• platforms: 平台特定代码，包括Web和Weex
• compiler: 模板编译器，将模板转换为渲染函数
• server: 服务端渲染相关代码
• sfc: 单文件组件(.vue文件)解析器
• shared: 共享工具函数

一、响应式系统

Vue 2的响应式系统是整个框架的核心，它基于Object.defineProperty实现数据劫持和发布订阅模式。

1.1 数据响应式原理

你是不是经常在多个组件里写同样的逻辑？比如监听窗口大小变化，或者跟踪鼠标位置？每次都要写一遍useEffect添加监听，还要在卸载时清理事件… 这样的重复代码不仅浪费时间，还容易出错。今天我要分享的React自定义Hook，就是解决这个痛点的神器！它能让你像搭积木一样封装和复用组件逻辑，代码整洁度直接提升一个level！

Vue 项目的main.js 中: render: h => h(App) 具体含义解释

请解释：render: h => h(App) 这段话的意思？

1
2
3
4
5
6
7

# main.js
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App)
})

环境搭建

目前流行的组件库搭建方式都是使用monorepo的方式，好处很多，可以在一个代码仓库中管理多个项目，可以达到项目之间的资源共享。这里也是使用这种方式。

以 pnpm 构建 monorepo

首先全局安装pnpm

Vue2响应式系统的工作原理

Vue2响应式系统的核心实现机制
Vue2的响应式系统基于数据劫持与发布-订阅模式，通过Object.defineProperty() API拦截数据访问与修改，并结合依赖收集机制实现视图自动更新。其核心目标是建立数据与视图之间的联动关系，当数据变化时触发依赖组件的重新渲染。

要解决的问题

从实现原理来说，其实需要解决的就是以下几个问题：

问：前端路由和 nginx location 哪个优先级更高？
答：当然是 nginx location 优先级更高因为 nginx location 优先级更高，所以会导致 history 模式的SPA（单页应用）在刷新的时候，会有 404 的问题