From 61b71b3163ea2adc18a313d9789bea36db2a76c0 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Tue, 17 Jun 2025 23:05:08 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=2015-VueComponent=E6=9E=84=E9=80=A0?= =?UTF-8?q?=E5=87=BD=E6=95=B0.html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../15-VueComponent构造函数.html | 44 +++++ .../import-script/15-VueComponent构造函数.md | 150 ++++++++++++++++++ .../.editorconfig | 0 .../.eslintcache | 0 .../.gitattributes | 0 .../.prettierignore | 0 .../.prettierrc.js | 0 {vue-tutorials => vue3-tutorials}/README.md | 0 {vue-tutorials => vue3-tutorials}/env.d.ts | 0 .../eslint.config.ts | 0 {vue-tutorials => vue3-tutorials}/index.html | 0 .../package.json | 0 .../pnpm-lock.yaml | 0 .../public/favicon.ico | Bin {vue-tutorials => vue3-tutorials}/src/App.vue | 0 .../src/assets/base.css | 0 .../src/assets/logo.svg | 0 .../src/assets/main.css | 0 {vue-tutorials => vue3-tutorials}/src/main.ts | 0 .../src/router/index.ts | 0 .../src/stores/counter.ts | 0 .../src/views/AboutView.vue | 0 .../src/views/HomeView.vue | 0 .../tsconfig.app.json | 0 .../tsconfig.json | 0 .../tsconfig.node.json | 0 .../vite.config.ts | 0 27 files changed, 194 insertions(+) create mode 100644 vue2-tutorials/import-script/15-VueComponent构造函数.html create mode 100644 vue2-tutorials/import-script/15-VueComponent构造函数.md rename {vue-tutorials => vue3-tutorials}/.editorconfig (100%) rename {vue-tutorials => vue3-tutorials}/.eslintcache (100%) rename {vue-tutorials => vue3-tutorials}/.gitattributes (100%) rename {vue-tutorials => vue3-tutorials}/.prettierignore (100%) rename {vue-tutorials => vue3-tutorials}/.prettierrc.js (100%) rename {vue-tutorials => vue3-tutorials}/README.md (100%) rename {vue-tutorials => vue3-tutorials}/env.d.ts (100%) rename {vue-tutorials => vue3-tutorials}/eslint.config.ts (100%) rename {vue-tutorials => vue3-tutorials}/index.html (100%) rename {vue-tutorials => vue3-tutorials}/package.json (100%) rename {vue-tutorials => vue3-tutorials}/pnpm-lock.yaml (100%) rename {vue-tutorials => vue3-tutorials}/public/favicon.ico (100%) rename {vue-tutorials => vue3-tutorials}/src/App.vue (100%) rename {vue-tutorials => vue3-tutorials}/src/assets/base.css (100%) rename {vue-tutorials => vue3-tutorials}/src/assets/logo.svg (100%) rename {vue-tutorials => vue3-tutorials}/src/assets/main.css (100%) rename {vue-tutorials => vue3-tutorials}/src/main.ts (100%) rename {vue-tutorials => vue3-tutorials}/src/router/index.ts (100%) rename {vue-tutorials => vue3-tutorials}/src/stores/counter.ts (100%) rename {vue-tutorials => vue3-tutorials}/src/views/AboutView.vue (100%) rename {vue-tutorials => vue3-tutorials}/src/views/HomeView.vue (100%) rename {vue-tutorials => vue3-tutorials}/tsconfig.app.json (100%) rename {vue-tutorials => vue3-tutorials}/tsconfig.json (100%) rename {vue-tutorials => vue3-tutorials}/tsconfig.node.json (100%) rename {vue-tutorials => vue3-tutorials}/vite.config.ts (100%) 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