151 lines
3.7 KiB
Markdown
151 lines
3.7 KiB
Markdown
|
# 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 | 父子组件 | `<Child :value="data" @input="handle">` |
|
|||
|
|
| 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 |
|
|||
|
|
| 性能优化 | 手动配置 | 自动优化 |
|
|||
|
|
| 片段支持 | 单根节点 | 多根节点 |
|