diff --git a/vue2-tutorials/import-script/15-VueComponent构造函数.html b/vue2-tutorials/import-script/15-VueComponent构造函数.html
new file mode 100644
index 0000000..144f304
--- /dev/null
+++ b/vue2-tutorials/import-script/15-VueComponent构造函数.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ VueComponent构造函数
+
+
+
+
+
+
+
+
+
diff --git a/vue2-tutorials/import-script/15-VueComponent构造函数.md b/vue2-tutorials/import-script/15-VueComponent构造函数.md
new file mode 100644
index 0000000..509c600
--- /dev/null
+++ b/vue2-tutorials/import-script/15-VueComponent构造函数.md
@@ -0,0 +1,150 @@
+# Vue2 组件系统深度解析
+
+## 一、组件构造函数原理
+
+### 1. Vue.extend 核心机制
+```javascript
+const School = Vue.extend({
+ name: "School",
+ template: `...`,
+ data() {
+ return {
+ name: "Bunny",
+ address: "昆山县印象花园"
+ };
+ }
+});
+
+// 每次调用返回全新的构造函数
+console.log(School); // ƒ VueComponent(options) { this._init(options); }
+```
+
+### 2. 组件实例化过程
+1. **模板编译**：将template编译为render函数
+2. **选项合并**：合并Vue全局配置和组件选项
+3. **构造函数生成**：基于Vue基类创建子类
+4. **实例化**：通过`new Component(options)`创建实例
+
+## 二、组件注册方式对比
+
+| 注册方式 | 语法 | 作用域 | 生命周期 |
+| -------- | ----------------------- | -------------- | ------------ |
+| 全局注册 | `Vue.component()` | 全应用可用 | 与根实例相同 |
+| 局部注册 | `components`选项 | 当前组件作用域 | 独立生命周期 |
+| 动态注册 | `Vue.extend()`+手动挂载 | 灵活控制 | 手动管理 |
+
+## 三、组件核心特性详解
+
+### 1. 组件选项合并策略
+```javascript
+const Parent = Vue.extend({
+ created() {
+ console.log('Parent Hook');
+ }
+});
+
+const Child = Parent.extend({
+ created() {
+ console.log('Child Hook');
+ }
+});
+// 执行顺序：Parent Hook → Child Hook
+```
+
+### 2. 组件隔离机制
+- **独立作用域**：每个组件实例维护独立的数据副本
+- **样式隔离**：通过scoped CSS实现
+- **命名空间**：基于组件树结构的$parent/$children关系
+
+### 3. 性能优化技巧
+```javascript
+// 1. 异步组件
+const AsyncComp = () => ({
+ component: import('./MyComp.vue'),
+ loading: LoadingComp,
+ error: ErrorComp
+});
+
+// 2. 函数式组件
+const FuncComp = {
+ functional: true,
+ render(h, context) {
+ // 无状态、无实例
+ }
+};
+```
+
+## 四、高级开发模式
+
+### 1. 动态组件工厂
+```javascript
+function createComponent(template, data) {
+ return Vue.extend({
+ template,
+ data() {
+ return {...data};
+ }
+ });
+}
+```
+
+### 2. 组件继承扩展
+```javascript
+const BaseList = Vue.extend({
+ methods: {
+ fetchData() {
+ // 基础实现
+ }
+ }
+});
+
+const UserList = BaseList.extend({
+ methods: {
+ fetchData() {
+ // 扩展实现
+ super.fetchData();
+ }
+ }
+});
+```
+
+### 3. 组件通信体系
+| 通信方式 | 适用场景 | 示例 |
+| -------------- | -------- | ------------------------------------------ |
+| Props/Events | 父子组件 | `` |
+| Provide/Inject | 跨级组件 | `provide: { value: 1 }, inject: ['value']` |
+| Event Bus | 任意组件 | `Vue.prototype.$bus = new Vue()` |
+| Vuex | 复杂状态 | 集中式状态管理 |
+
+## 五、调试与问题排查
+
+### 1. 组件实例检查
+```javascript
+mounted() {
+ console.log(this.$options.name); // 组件名
+ console.log(this.$parent); // 父实例
+ console.log(this.$children); // 子实例
+}
+```
+
+### 2. 常见问题解决方案
+1. **模板不渲染**：
+ - 检查组件是否正确定义和注册
+ - 验证template/content是否有效
+
+2. **数据不更新**：
+ - 确认data是否为函数返回新对象
+ - 检查props是否响应式
+
+3. **生命周期异常**：
+ - 避免在beforeCreate访问data
+ - 确保异步操作在mounted后执行
+
+## 六、Vue3对比说明
+
+| 特性 | Vue2 | Vue3 |
+| -------- | ----------- | --------------- |
+| 组件定义 | Options API | Composition API |
+| 继承机制 | Vue.extend | defineComponent |
+| 性能优化 | 手动配置 | 自动优化 |
+| 片段支持 | 单根节点 | 多根节点 |
diff --git a/vue-tutorials/.editorconfig b/vue3-tutorials/.editorconfig
similarity index 100%
rename from vue-tutorials/.editorconfig
rename to vue3-tutorials/.editorconfig
diff --git a/vue-tutorials/.eslintcache b/vue3-tutorials/.eslintcache
similarity index 100%
rename from vue-tutorials/.eslintcache
rename to vue3-tutorials/.eslintcache
diff --git a/vue-tutorials/.gitattributes b/vue3-tutorials/.gitattributes
similarity index 100%
rename from vue-tutorials/.gitattributes
rename to vue3-tutorials/.gitattributes
diff --git a/vue-tutorials/.prettierignore b/vue3-tutorials/.prettierignore
similarity index 100%
rename from vue-tutorials/.prettierignore
rename to vue3-tutorials/.prettierignore
diff --git a/vue-tutorials/.prettierrc.js b/vue3-tutorials/.prettierrc.js
similarity index 100%
rename from vue-tutorials/.prettierrc.js
rename to vue3-tutorials/.prettierrc.js
diff --git a/vue-tutorials/README.md b/vue3-tutorials/README.md
similarity index 100%
rename from vue-tutorials/README.md
rename to vue3-tutorials/README.md
diff --git a/vue-tutorials/env.d.ts b/vue3-tutorials/env.d.ts
similarity index 100%
rename from vue-tutorials/env.d.ts
rename to vue3-tutorials/env.d.ts
diff --git a/vue-tutorials/eslint.config.ts b/vue3-tutorials/eslint.config.ts
similarity index 100%
rename from vue-tutorials/eslint.config.ts
rename to vue3-tutorials/eslint.config.ts
diff --git a/vue-tutorials/index.html b/vue3-tutorials/index.html
similarity index 100%
rename from vue-tutorials/index.html
rename to vue3-tutorials/index.html
diff --git a/vue-tutorials/package.json b/vue3-tutorials/package.json
similarity index 100%
rename from vue-tutorials/package.json
rename to vue3-tutorials/package.json
diff --git a/vue-tutorials/pnpm-lock.yaml b/vue3-tutorials/pnpm-lock.yaml
similarity index 100%
rename from vue-tutorials/pnpm-lock.yaml
rename to vue3-tutorials/pnpm-lock.yaml
diff --git a/vue-tutorials/public/favicon.ico b/vue3-tutorials/public/favicon.ico
similarity index 100%
rename from vue-tutorials/public/favicon.ico
rename to vue3-tutorials/public/favicon.ico
diff --git a/vue-tutorials/src/App.vue b/vue3-tutorials/src/App.vue
similarity index 100%
rename from vue-tutorials/src/App.vue
rename to vue3-tutorials/src/App.vue
diff --git a/vue-tutorials/src/assets/base.css b/vue3-tutorials/src/assets/base.css
similarity index 100%
rename from vue-tutorials/src/assets/base.css
rename to vue3-tutorials/src/assets/base.css
diff --git a/vue-tutorials/src/assets/logo.svg b/vue3-tutorials/src/assets/logo.svg
similarity index 100%
rename from vue-tutorials/src/assets/logo.svg
rename to vue3-tutorials/src/assets/logo.svg
diff --git a/vue-tutorials/src/assets/main.css b/vue3-tutorials/src/assets/main.css
similarity index 100%
rename from vue-tutorials/src/assets/main.css
rename to vue3-tutorials/src/assets/main.css
diff --git a/vue-tutorials/src/main.ts b/vue3-tutorials/src/main.ts
similarity index 100%
rename from vue-tutorials/src/main.ts
rename to vue3-tutorials/src/main.ts
diff --git a/vue-tutorials/src/router/index.ts b/vue3-tutorials/src/router/index.ts
similarity index 100%
rename from vue-tutorials/src/router/index.ts
rename to vue3-tutorials/src/router/index.ts
diff --git a/vue-tutorials/src/stores/counter.ts b/vue3-tutorials/src/stores/counter.ts
similarity index 100%
rename from vue-tutorials/src/stores/counter.ts
rename to vue3-tutorials/src/stores/counter.ts
diff --git a/vue-tutorials/src/views/AboutView.vue b/vue3-tutorials/src/views/AboutView.vue
similarity index 100%
rename from vue-tutorials/src/views/AboutView.vue
rename to vue3-tutorials/src/views/AboutView.vue
diff --git a/vue-tutorials/src/views/HomeView.vue b/vue3-tutorials/src/views/HomeView.vue
similarity index 100%
rename from vue-tutorials/src/views/HomeView.vue
rename to vue3-tutorials/src/views/HomeView.vue
diff --git a/vue-tutorials/tsconfig.app.json b/vue3-tutorials/tsconfig.app.json
similarity index 100%
rename from vue-tutorials/tsconfig.app.json
rename to vue3-tutorials/tsconfig.app.json
diff --git a/vue-tutorials/tsconfig.json b/vue3-tutorials/tsconfig.json
similarity index 100%
rename from vue-tutorials/tsconfig.json
rename to vue3-tutorials/tsconfig.json
diff --git a/vue-tutorials/tsconfig.node.json b/vue3-tutorials/tsconfig.node.json
similarity index 100%
rename from vue-tutorials/tsconfig.node.json
rename to vue3-tutorials/tsconfig.node.json
diff --git a/vue-tutorials/vite.config.ts b/vue3-tutorials/vite.config.ts
similarity index 100%
rename from vue-tutorials/vite.config.ts
rename to vue3-tutorials/vite.config.ts