✨ 15-VueComponent构造函数.html
This commit is contained in:
parent
dbf4e201ce
commit
61b71b3163
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="js/vue@2.7.16.js"></script>
|
||||
<title>VueComponent构造函数</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<School />
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const School = Vue.extend({
|
||||
name: "School",
|
||||
template: `
|
||||
<div>
|
||||
<h2>学校名称：{{name}} </h2>
|
||||
<h2>学校地址：{{address}} </h2>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
name: "Bunny",
|
||||
address: "昆山县印象花园",
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
// 类型是构造函数
|
||||
// ƒ VueComponent(options) {
|
||||
// this._init(options);
|
||||
// }
|
||||
// 每次调用 Vue.extend 返回都是全新的 VueComponent
|
||||
console.log(School);
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
components: { School },
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -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 | 父子组件 | `<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 |
|
||||
| 性能优化 | 手动配置 | 自动优化 |
|
||||
| 片段支持 | 单根节点 | 多根节点 |
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 276 B After Width: | Height: | Size: 276 B |
Loading…
Reference in New Issue