Compare commits
11 Commits
ba61fc3655
...
eb49928833
| Author | SHA1 | Date |
|---|---|---|
 bunny
|
eb49928833 | |
|
bunny
|
5546635e31 | |
|
bunny
|
bfaaeb8843 | |
|
bunny
|
84e7108798 | |
|
bunny
|
39e7447e70 | |
|
bunny
|
926cb154cb | |
|
bunny
|
85c1ae88d5 | |
|
bunny
|
cdbdbec0f8 | |
|
bunny
|
466b18afed | |
|
bunny
|
61b71b3163 | |
|
bunny
|
dbf4e201ce |
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>模板语法</title>
|
<title>模板语法</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>10-列表渲染</title>
|
<title>10-列表渲染</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>列表过滤</title>
|
<title>列表过滤</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>Vue监测数据的原理_数组</title>
|
<title>Vue监测数据的原理_数组</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<script src="js/dayjs.min.js"></script>
|
<script src="../js/dayjs.min.js"></script>
|
||||||
<title>过滤器</title>
|
<title>过滤器</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!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>自定义指令_函数式</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<h2>当前值：<span v-text="num"></span></h2>
|
||||||
|
<h2>放大十倍值：<span v-big="num"></span></h2>
|
||||||
|
<button @click="num++">点击</button>
|
||||||
|
|
||||||
|
<input type="text" v-fbind="num" />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const vm = new Vue({
|
||||||
|
el: "#app",
|
||||||
|
data: { num: 10 },
|
||||||
|
directives: {
|
||||||
|
// 指令所在模板被重新解析时
|
||||||
|
big(el, binding) {
|
||||||
|
el.innerText = binding.value * 10;
|
||||||
|
},
|
||||||
|
fbind: {
|
||||||
|
bind(el, binding) {
|
||||||
|
console.log("bind");
|
||||||
|
el.value = binding.value;
|
||||||
|
},
|
||||||
|
inserted(el, binding) {
|
||||||
|
console.log("inserted");
|
||||||
|
el.focus();
|
||||||
|
},
|
||||||
|
update(el, binding) {
|
||||||
|
console.log("update");
|
||||||
|
el.value = binding.value;
|
||||||
|
el.focus();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
# Vue2 自定义指令全面指南
|
||||||
|
|
||||||
|
指令中的作用域时window！！！
|
||||||
|
|
||||||
|
## 一、指令类型对比
|
||||||
|
|
||||||
|
| 类型 | 语法 | 触发时机 | 适用场景 |
|
||||||
|
| ------ | ------------------------------------- | ------------- | ----------- |
|
||||||
|
| 函数式 | `directives: { big(el, binding) {} }` | bind + update | 简单DOM操作 |
|
||||||
|
| 对象式 | `directives: { fbind: { hooks } }` | 完整生命周期 | 复杂交互 |
|
||||||
|
|
||||||
|
## 二、对象式指令详解
|
||||||
|
|
||||||
|
### 1. 完整生命周期钩子
|
||||||
|
```javascript
|
||||||
|
fbind: {
|
||||||
|
// 指令第一次绑定到元素时调用（初始化设置）
|
||||||
|
bind(el, binding) {
|
||||||
|
el.value = binding.value;
|
||||||
|
},
|
||||||
|
// 被绑定元素插入父节点时调用
|
||||||
|
inserted(el, binding) {
|
||||||
|
el.focus(); // 自动获取焦点
|
||||||
|
},
|
||||||
|
// 所在组件更新时调用
|
||||||
|
update(el, binding) {
|
||||||
|
el.value = binding.value;
|
||||||
|
el.focus(); // 值更新后重新聚焦
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 执行流程示例
|
||||||
|
1. 初始化时：`bind` → `inserted`
|
||||||
|
2. 数据更新时：`update`
|
||||||
|
3. 模板重新解析时：`update`
|
||||||
|
|
||||||
|
## 三、最佳实践建议
|
||||||
|
|
||||||
|
### 1. 输入框增强指令
|
||||||
|
```javascript
|
||||||
|
Vue.directive('input-enhanced', {
|
||||||
|
inserted(el) {
|
||||||
|
el.select(); // 自动选中文本
|
||||||
|
},
|
||||||
|
update(el) {
|
||||||
|
// 防抖处理避免频繁触发
|
||||||
|
clearTimeout(el._timer);
|
||||||
|
el._timer = setTimeout(() => {
|
||||||
|
el.select();
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
unbind(el) {
|
||||||
|
// 清理工作
|
||||||
|
clearTimeout(el._timer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 性能优化技巧
|
||||||
|
```javascript
|
||||||
|
update(el, binding) {
|
||||||
|
if (binding.value !== binding.oldValue) {
|
||||||
|
// 只有值变化时才执行操作
|
||||||
|
el.value = binding.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 四、高级应用场景
|
||||||
|
|
||||||
|
### 1. 权限控制指令
|
||||||
|
```javascript
|
||||||
|
Vue.directive('permission', {
|
||||||
|
inserted(el, binding) {
|
||||||
|
if (!checkPermission(binding.value)) {
|
||||||
|
el.parentNode.removeChild(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
使用方式：
|
||||||
|
```html
|
||||||
|
<button v-permission="'admin'">管理按钮</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 拖拽指令实现
|
||||||
|
```javascript
|
||||||
|
Vue.directive('drag', {
|
||||||
|
inserted(el) {
|
||||||
|
el.style.cursor = 'move';
|
||||||
|
el.onmousedown = function(e) {
|
||||||
|
// 拖拽逻辑实现
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unbind(el) {
|
||||||
|
el.onmousedown = null; // 清理事件
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 五、常见问题解决方案
|
||||||
|
|
||||||
|
1. **指令不生效问题排查**
|
||||||
|
- 检查指令名称是否使用kebab-case（短横线）
|
||||||
|
- 确认绑定值是否为响应式数据
|
||||||
|
- 验证是否在正确的生命周期钩子操作DOM
|
||||||
|
|
||||||
|
2. **动态指令参数**
|
||||||
|
```html
|
||||||
|
<div v-demo:[dynamicArg]="value"></div>
|
||||||
|
```
|
||||||
|
```javascript
|
||||||
|
binding.arg // 获取动态参数
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **多修饰符处理**
|
||||||
|
```javascript
|
||||||
|
if (binding.modifiers.large) {
|
||||||
|
el.style.fontSize = '20px';
|
||||||
|
}
|
||||||
|
if (binding.modifiers.red) {
|
||||||
|
el.style.color = 'red';
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 六、与Vue3的对比
|
||||||
|
|
||||||
|
| 特性 | Vue2 | Vue3 |
|
||||||
|
| --------- | ---------------------- | ------------------- |
|
||||||
|
| 钩子名称 | `bind` → `beforeMount` | |
|
||||||
|
| | `inserted` → `mounted` | |
|
||||||
|
| | 新增`beforeUpdate` | |
|
||||||
|
| 参数传递 | 通过`binding`对象 | 更直观的上下文参数 |
|
||||||
|
| 组合式API | 无 | 支持setup中使用指令 |
|
||||||
|
|
@ -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 |
|
||||||
|
| 性能优化 | 手动配置 | 自动优化 |
|
||||||
|
| 片段支持 | 单根节点 | 多根节点 |
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>数据绑定</title>
|
<title>数据绑定</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>Vue中的数据代理</title>
|
<title>Vue中的数据代理</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>事件处理</title>
|
<title>事件处理</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>键盘事件</title>
|
<title>键盘事件</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>计算属性</title>
|
<title>计算属性</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/vue@2.7.16.js"></script>
|
<script src="../js/vue@2.7.16.js"></script>
|
||||||
<title>监视属性</title>
|
<title>监视属性</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<School />
|
||||||
|
<Student />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import School from "./compontens/School.vue";
|
||||||
|
import Student from "./compontens/Student.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
compontens: {
|
||||||
|
School,
|
||||||
|
Student,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<h2>学校。。。</h2>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<h2>学生</h2>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>单文件内容</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
<script type="module" src="../../js/vue@2.7.16.js"></script>
|
||||||
|
<script type="module" src="./main.js"></script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: "#app",
|
||||||
|
template: "<App></App>",
|
||||||
|
compontens: {
|
||||||
|
App,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
shamefully-hoist=true
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# demo2
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
pnpm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
pnpm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
pnpm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: ["@vue/cli-plugin-babel/preset"],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "demo2",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vuex": "3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.27.4",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@babel/preset-env": "^7.27.2",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.8",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
],
|
||||||
|
"packageManager": "pnpm@10.8.1+sha512.c50088ba998c67b8ca8c99df8a5e02fd2ae2e2b29aaf238feaa9e124248d3f48f9fb6db2424949ff901cffbb5e0f0cc1ad6aedb602cd29450751d11c35023677"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,2 @@
|
||||||
|
ignoredBuiltDependencies:
|
||||||
|
- core-js
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<!-- <Demo1 />
|
||||||
|
<hr />
|
||||||
|
<Demo2 />
|
||||||
|
<hr />
|
||||||
|
<Demo3 /> -->
|
||||||
|
<Demo4 />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import Demo1 from "@/views/demo1/index.vue";
|
||||||
|
// import Demo2 from "@/views/demo2/index.vue";
|
||||||
|
// import Demo3 from "@/views/demo3/index.vue";
|
||||||
|
import Demo4 from "@/views/demo4/index.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
// components: { Demo1, Demo2, Demo3 },
|
||||||
|
components: { Demo4 },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import store from "./store";
|
||||||
|
|
||||||
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: (h) => h(App),
|
||||||
|
store,
|
||||||
|
}).$mount("#app");
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import Vuex from "vuex";
|
||||||
|
import count from "./modules/count";
|
||||||
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
state: {},
|
||||||
|
mutations: {},
|
||||||
|
actions: {},
|
||||||
|
modules: { count },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default store;
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import Vuex from "vuex";
|
||||||
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
const count = {
|
||||||
|
namespaced: true,
|
||||||
|
state: { num: 1, sum: 0 },
|
||||||
|
actions: {
|
||||||
|
// 奇数相加
|
||||||
|
incrementOdd(context) {
|
||||||
|
// 可以从上下文中获取sum
|
||||||
|
if (context.state.sum % 2) {
|
||||||
|
context.commit("INCREMENT_ODD");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
incrementWait(context) {
|
||||||
|
setTimeout(() => {
|
||||||
|
context.commit("INCREMENT_WAIT");
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
// 相加
|
||||||
|
INCREMENT(state) {
|
||||||
|
state.sum += state.num;
|
||||||
|
},
|
||||||
|
// 相减
|
||||||
|
DECREMENT(state) {
|
||||||
|
state.sum -= state.num;
|
||||||
|
},
|
||||||
|
// 奇数相加
|
||||||
|
INCREMENT_ODD(state) {
|
||||||
|
state.sum += state.num;
|
||||||
|
},
|
||||||
|
INCREMENT_WAIT(state) {
|
||||||
|
state.sum += state.num;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default count;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<div class="demo">
|
||||||
|
<h2>学校名称：{{ name }}</h2>
|
||||||
|
<h2>学校地址：{{ address }}</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SchoolInfo",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: "Bunny",
|
||||||
|
address: "昆山市印象花园",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<h1 ref="title" v-text="message"></h1>
|
||||||
|
<button @click="ShowDom">输出上方DOM元素</button>
|
||||||
|
<SchoolInfo ref="schoolInfoRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SchoolInfo from "@/views/demo1/components/SchoolInfo.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Demo-1",
|
||||||
|
components: { SchoolInfo },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: "学习Vue2",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
ShowDom() {
|
||||||
|
// 获取当前Ref对象内容
|
||||||
|
console.log("@@@", this.$refs.title);
|
||||||
|
// 获取子组件对象实例
|
||||||
|
console.log("@@@", this.$refs.schoolInfoRef);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
# Vue2 中的 ref 引用机制详解
|
||||||
|
|
||||||
|
## 一、ref 的基本概念
|
||||||
|
|
||||||
|
`ref` 是 Vue2 提供的一种特殊的属性，用于直接访问 DOM 元素或子组件实例。它比传统的 `document.getElementById` 等方式更适合在 Vue 生态中使用。
|
||||||
|
|
||||||
|
## 二、代码解析
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<!-- 绑定到DOM元素 -->
|
||||||
|
<h1 ref="title" v-text="message"></h1>
|
||||||
|
<button @click="ShowDom">输出上方DOM元素</button>
|
||||||
|
|
||||||
|
<!-- 绑定到子组件 -->
|
||||||
|
<SchoolInfo ref="schoolInfoRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SchoolInfo from "@/components/SchoolInfo.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
components: { SchoolInfo },
|
||||||
|
data() {
|
||||||
|
return { message: "学习Vue2" };
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
ShowDom() {
|
||||||
|
// 访问DOM元素
|
||||||
|
console.log(this.$refs.title); // 输出: <h1>学习Vue2</h1>
|
||||||
|
|
||||||
|
// 访问子组件实例
|
||||||
|
console.log(this.$refs.schoolInfoRef); // 输出: SchoolInfo组件实例
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 三、ref 的核心特性
|
||||||
|
|
||||||
|
### 1. 绑定目标类型
|
||||||
|
|
||||||
|
| 绑定目标 | 获取内容 | 使用场景 |
|
||||||
|
| --------- | ---------------- | ----------------------- |
|
||||||
|
| DOM元素 | 原生DOM节点 | 直接操作DOM |
|
||||||
|
| 组件 | 组件实例 | 调用子组件方法/访问数据 |
|
||||||
|
| v-for元素 | DOM数组/组件数组 | 操作列表元素 |
|
||||||
|
|
||||||
|
### 2. 生命周期时机
|
||||||
|
|
||||||
|
- **创建**：在组件 `mounted` 钩子之后可用
|
||||||
|
- **更新**：响应式更新后自动同步
|
||||||
|
- **销毁**：组件销毁时自动解除引用
|
||||||
|
|
||||||
|
### 3. 访问方式
|
||||||
|
|
||||||
|
通过组件实例的 `$refs` 对象访问：
|
||||||
|
```javascript
|
||||||
|
this.$refs.refName
|
||||||
|
```
|
||||||
|
|
||||||
|
## 四、最佳实践
|
||||||
|
|
||||||
|
### 1. 命名规范
|
||||||
|
- 使用 camelCase 命名（如 `schoolInfoRef`）
|
||||||
|
- 避免使用保留字或Vue内置名称
|
||||||
|
- 保持命名语义化（如 `formRef`, `tableRef`）
|
||||||
|
|
||||||
|
### 2. 安全访问模式
|
||||||
|
```javascript
|
||||||
|
methods: {
|
||||||
|
submitForm() {
|
||||||
|
// 先检查是否存在
|
||||||
|
if (this.$refs.formRef) {
|
||||||
|
this.$refs.formRef.validate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 动态ref（Vue 2.6+）
|
||||||
|
```html
|
||||||
|
<div v-for="item in list" :ref="`item_${item.id}`"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
methods: {
|
||||||
|
getItemRef(id) {
|
||||||
|
return this.$refs[`item_${id}`];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 五、高级用法
|
||||||
|
|
||||||
|
### 1. 组件通信
|
||||||
|
```javascript
|
||||||
|
// 父组件
|
||||||
|
this.$refs.childComp.doSomething();
|
||||||
|
|
||||||
|
// 子组件 SchoolInfo.vue
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
doSomething() {
|
||||||
|
// 子组件暴露的方法
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 表单验证示例
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<form ref="formRef">
|
||||||
|
<input v-model="form.name" required>
|
||||||
|
<button @click.prevent="validate">提交</button>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
validate() {
|
||||||
|
const form = this.$refs.formRef;
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
// 表单验证通过
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 结合第三方库
|
||||||
|
```javascript
|
||||||
|
mounted() {
|
||||||
|
// 使用ref初始化第三方库
|
||||||
|
this.chart = new Chart(this.$refs.chartCanvas, {
|
||||||
|
// 配置项
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
// 清理工作
|
||||||
|
this.chart.destroy();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 六、注意事项
|
||||||
|
|
||||||
|
1. **响应式限制**：
|
||||||
|
- `$refs` 不是响应式的
|
||||||
|
- 避免在模板或计算属性中使用
|
||||||
|
|
||||||
|
2. **执行时机**：
|
||||||
|
- 在 `mounted` 之前访问会是 `undefined`
|
||||||
|
- 更新后需要等待 `$nextTick` 获取最新引用
|
||||||
|
|
||||||
|
3. **过度使用问题**：
|
||||||
|
- 优先考虑 props/events 通信
|
||||||
|
- 避免形成紧密耦合的组件关系
|
||||||
|
|
||||||
|
4. **与 Vue3 的区别**：
|
||||||
|
- Vue3 中 ref 需要从 `vue` 导入
|
||||||
|
- 组合式 API 中使用 `ref()` 函数创建响应式引用
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
# Vue2 Props 属性传递机制详解
|
||||||
|
|
||||||
|
## 一、Props 的基本概念
|
||||||
|
|
||||||
|
Props 是 Vue 组件之间数据传递的主要方式，允许父组件向子组件传递数据。它具有明确的单向数据流特性（父组件 → 子组件）。
|
||||||
|
|
||||||
|
## 二、三种 Props 声明方式对比
|
||||||
|
|
||||||
|
### 1. 数组式声明（简单接收）
|
||||||
|
```javascript
|
||||||
|
props: ["name", "sex", "age"]
|
||||||
|
```
|
||||||
|
- **特点**：仅指定属性名
|
||||||
|
- **适用场景**：快速原型开发
|
||||||
|
- **限制**：无类型检查，无验证逻辑
|
||||||
|
|
||||||
|
### 2. 对象式声明（类型检查）
|
||||||
|
```javascript
|
||||||
|
props: {
|
||||||
|
name: String,
|
||||||
|
sex: String,
|
||||||
|
age: Number
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **特点**：添加基础类型检查
|
||||||
|
- **优势**：在开发模式下会发出警告
|
||||||
|
- **不足**：无法设置必填/默认值
|
||||||
|
|
||||||
|
### 3. 配置对象声明（完整配置）
|
||||||
|
```javascript
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true // 必须传入
|
||||||
|
},
|
||||||
|
sex: {
|
||||||
|
type: String,
|
||||||
|
default: "男🚹" // 默认值
|
||||||
|
},
|
||||||
|
age: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
validator: value => value >= 6 && value <= 60 // 自定义验证
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **完整功能**：
|
||||||
|
- 类型检查 (`type`)
|
||||||
|
- 必填标记 (`required`)
|
||||||
|
- 默认值 (`default`)
|
||||||
|
- 自定义验证 (`validator`)
|
||||||
|
|
||||||
|
## 三、核心特性详解
|
||||||
|
|
||||||
|
### 1. 类型系统支持
|
||||||
|
Vue 支持以下原生构造函数作为类型：
|
||||||
|
- `String`
|
||||||
|
- `Number`
|
||||||
|
- `Boolean`
|
||||||
|
- `Array`
|
||||||
|
- `Object`
|
||||||
|
- `Date`
|
||||||
|
- `Function`
|
||||||
|
- `Symbol`
|
||||||
|
|
||||||
|
也可以使用自定义构造函数：
|
||||||
|
```javascript
|
||||||
|
props: {
|
||||||
|
author: Person // 检查是否是Person的实例
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 默认值函数
|
||||||
|
当默认值是对象或数组时，必须使用工厂函数：
|
||||||
|
```javascript
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({ pageSize: 10 })
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 自定义验证器
|
||||||
|
```javascript
|
||||||
|
age: {
|
||||||
|
type: Number,
|
||||||
|
validator: value => {
|
||||||
|
return value >= 6 && value <= 60;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 四、最佳实践
|
||||||
|
|
||||||
|
### 1. 命名规范
|
||||||
|
- **Prop 名称**：使用 camelCase（JavaScript）
|
||||||
|
- **HTML 特性**：使用 kebab-case（DOM）
|
||||||
|
```html
|
||||||
|
<!-- 父组件模板 -->
|
||||||
|
<child-component user-name="张三"></child-component>
|
||||||
|
|
||||||
|
<!-- 子组件声明 -->
|
||||||
|
props: ['userName']
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 单向数据流原则
|
||||||
|
- **禁止**子组件直接修改 prop
|
||||||
|
- **正确做法**：
|
||||||
|
```javascript
|
||||||
|
// 子组件中使用data接收
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
localAge: this.age
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 或使用计算属性
|
||||||
|
computed: {
|
||||||
|
normalizedAge() {
|
||||||
|
return this.age + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 类型定义技巧
|
||||||
|
```javascript
|
||||||
|
// 使用PropType增强类型提示
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
|
||||||
|
props: {
|
||||||
|
user: {
|
||||||
|
type: Object as PropType<User>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 五、高级用法
|
||||||
|
|
||||||
|
### 1. 非Prop特性
|
||||||
|
未在props中声明的特性会自动绑定到组件的根元素上：
|
||||||
|
```html
|
||||||
|
<my-component data-test="123" class="extra"></my-component>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 同步修饰符
|
||||||
|
`.sync` 修饰符实现双向绑定（Vue 2.3+）：
|
||||||
|
```html
|
||||||
|
<!-- 父组件 -->
|
||||||
|
<child :title.sync="pageTitle"></child>
|
||||||
|
|
||||||
|
<!-- 等价于 -->
|
||||||
|
<child :title="pageTitle" @update:title="pageTitle = $event"></child>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. v-model 整合
|
||||||
|
自定义组件实现 v-model：
|
||||||
|
```javascript
|
||||||
|
props: ['value'],
|
||||||
|
methods: {
|
||||||
|
updateValue(newVal) {
|
||||||
|
this.$emit('input', newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 六、常见问题
|
||||||
|
|
||||||
|
1. **Prop未更新问题**：
|
||||||
|
- 确保父组件数据是响应式的
|
||||||
|
- 对象/数组需要确保是新的引用
|
||||||
|
|
||||||
|
2. **类型检查失败**：
|
||||||
|
- 开发模式下会输出警告
|
||||||
|
- 生产环境会静默失败
|
||||||
|
|
||||||
|
3. **性能优化**：
|
||||||
|
- 避免传递大型对象
|
||||||
|
- 必要时使用 `v-once` 冻结静态内容
|
||||||
|
|
||||||
|
## 七、与 Vue3 的区别
|
||||||
|
|
||||||
|
| 特性 | Vue2 | Vue3 |
|
||||||
|
| ---------- | ------------ | ----------------------- |
|
||||||
|
| 默认值函数 | 必须使用函数 | 可以直接赋值 |
|
||||||
|
| 类型定义 | PropType | 原生TypeScript支持 |
|
||||||
|
| 废弃语法 | .sync | 移除，用v-model参数替代 |
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>学生姓名：{{ name }}</h2>
|
||||||
|
<h2>学习性别：{{ sex }}</h2>
|
||||||
|
<h2>学生年龄：{{ age + 1 }}</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SchoolInfo",
|
||||||
|
// 第一种传入方法---简单接受
|
||||||
|
// props: ["name", "sex", "age"],
|
||||||
|
|
||||||
|
// 第二种传入方法---接受同时对数据进行限制
|
||||||
|
// props: {
|
||||||
|
// name: String,
|
||||||
|
// sex: String,
|
||||||
|
// age: Number,
|
||||||
|
// },
|
||||||
|
props: {
|
||||||
|
name: { type: String, required: true /* 必须要传入的 */ },
|
||||||
|
sex: { type: String, default: "男🚹" /* 给一个默认值 */ },
|
||||||
|
age: { type: Number, required: true },
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<SchoolInfo name="Bunny1" sex="女🚺" :age="16" />
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<SchoolInfo name="Bunny2" sex="女🚺" :age="16" />
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<SchoolInfo name="Bunny3" :age="16" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SchoolInfo from "./components/SchoolInfo.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Demo-2",
|
||||||
|
components: { SchoolInfo },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
# Vue2 Mixins 混入机制详解
|
||||||
|
|
||||||
|
## 一、基本概念
|
||||||
|
|
||||||
|
Mixins（混入）是 Vue2 中用于分发组件可复用功能的灵活方式。一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被"混合"进入组件本身的选项。
|
||||||
|
|
||||||
|
## 二、代码示例解析
|
||||||
|
|
||||||
|
### 1. 混入对象定义 (test1.js)
|
||||||
|
```javascript
|
||||||
|
export const test1 = {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "Bunny" // 将被合并到组件data中
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showMessage() { // 将被合并到组件methods中
|
||||||
|
alert(`展示消息：${this.username}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 组件中使用混入 (SchoolInfo.vue)
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2 @click="showMessage">学生姓名-showMessage：{{ username }}</h2>
|
||||||
|
<h2>学习性别：{{ sex }}</h2>
|
||||||
|
<h2>学生年龄：{{ age + 1 }}</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { test1 } from "../mixins/test1";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "SchoolInfo",
|
||||||
|
mixins: [test1], // 注册混入
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "Bunny", // 与混入data合并
|
||||||
|
sex: "🚺",
|
||||||
|
age: 16
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 三、合并策略详解
|
||||||
|
|
||||||
|
### 1. 选项合并规则
|
||||||
|
| 选项类型 | 合并策略 | 示例结果 |
|
||||||
|
| ------------ | ---------------------- | ---------------------------- |
|
||||||
|
| data | 递归合并，组件优先 | 同名属性以组件为准 |
|
||||||
|
| methods | 合并，组件优先 | 同名方法覆盖 |
|
||||||
|
| 生命周期钩子 | 合并为数组，混入先执行 | 都会调用，顺序: mixin → 组件 |
|
||||||
|
| 其他对象值 | 组件优先 | 如components, directives等 |
|
||||||
|
|
||||||
|
### 2. 合并过程示例
|
||||||
|
```javascript
|
||||||
|
// 混入data
|
||||||
|
{ username: "Bunny" }
|
||||||
|
|
||||||
|
// 组件data
|
||||||
|
{
|
||||||
|
username: "Bunny", // 同名属性被保留
|
||||||
|
sex: "🚺",
|
||||||
|
age: 16
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最终合并结果
|
||||||
|
{
|
||||||
|
username: "Bunny", // 来自组件
|
||||||
|
sex: "🚺", // 来自组件
|
||||||
|
age: 16 // 来自组件
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 四、最佳实践
|
||||||
|
|
||||||
|
### 1. 命名规范
|
||||||
|
- 混入文件使用 `mixin-` 前缀（如 `mixin-logger.js`）
|
||||||
|
- 混入变量使用 `mixin` 后缀（如 `userMixin`）
|
||||||
|
- 避免与组件属性和方法重名
|
||||||
|
|
||||||
|
### 2. 使用建议
|
||||||
|
- **适合场景**：
|
||||||
|
- 多个组件共享相同逻辑
|
||||||
|
- 功能模块解耦
|
||||||
|
- 插件开发
|
||||||
|
|
||||||
|
- **避免场景**：
|
||||||
|
- 过度使用导致代码难以追踪
|
||||||
|
- 复杂的多层级混入
|
||||||
|
|
||||||
|
### 3. 全局混入
|
||||||
|
```javascript
|
||||||
|
// 谨慎使用！会影响所有Vue实例
|
||||||
|
Vue.mixin({
|
||||||
|
created() {
|
||||||
|
console.log('全局混入的created钩子');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 五、高级用法
|
||||||
|
|
||||||
|
### 1. 自定义合并策略
|
||||||
|
```javascript
|
||||||
|
Vue.config.optionMergeStrategies.myOption = (parent, child, vm) => {
|
||||||
|
return child || parent;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 混入组合
|
||||||
|
```javascript
|
||||||
|
// featureMixin.js
|
||||||
|
export const featureMixin = {
|
||||||
|
methods: {
|
||||||
|
featureMethod() { /*...*/ }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 组件中使用多个混入
|
||||||
|
import { userMixin, featureMixin } from './mixins';
|
||||||
|
export default {
|
||||||
|
mixins: [userMixin, featureMixin]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 混入与插件结合
|
||||||
|
```javascript
|
||||||
|
// plugin.js
|
||||||
|
export default {
|
||||||
|
install(Vue) {
|
||||||
|
Vue.mixin({
|
||||||
|
mounted() {
|
||||||
|
console.log('来自插件的混入');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 六、常见问题
|
||||||
|
|
||||||
|
1. **属性冲突**：
|
||||||
|
- 数据对象：组件data优先
|
||||||
|
- 方法：组件methods优先
|
||||||
|
- 钩子函数：都会执行，混入的先执行
|
||||||
|
|
||||||
|
2. **调试技巧**：
|
||||||
|
```javascript
|
||||||
|
mounted() {
|
||||||
|
console.log(this.$options); // 查看合并后的选项
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **与Vue3的区别**：
|
||||||
|
- Vue3 使用 Composition API 替代混入
|
||||||
|
- 提供 `setup` 函数更好地组织逻辑
|
||||||
|
|
||||||
|
## 七、替代方案比较
|
||||||
|
|
||||||
|
| 方案 | 优点 | 缺点 |
|
||||||
|
| --------------- | -------------- | ---------------- |
|
||||||
|
| Mixins | 逻辑复用简单 | 命名冲突风险 |
|
||||||
|
| 高阶组件 | 明确props传递 | 组件嵌套层次深 |
|
||||||
|
| 插件 | 全局功能扩展 | 过度使用影响性能 |
|
||||||
|
| Composition API | 更好的代码组织 | 仅Vue3支持 |
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2 @click="showMessage">学生姓名-showMessage：{{ username }}</h2>
|
||||||
|
<h2>学习性别：{{ sex }}</h2>
|
||||||
|
<h2>学生年龄：{{ age + 1 }}</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { test1 } from "../mixins/test1";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "SchoolInfo",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "Bunny",
|
||||||
|
sex: "🚺",
|
||||||
|
age: 16,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mixins: [test1],
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<SchoolInfo />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SchoolInfo from "./components/SchoolInfo.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Demo-3",
|
||||||
|
components: { SchoolInfo },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export const test1 = {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "Bunny",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showMessage() {
|
||||||
|
alert(`展示消息：${this.username}`);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
# Vuex 状态管理最佳实践指南
|
||||||
|
|
||||||
|
## 一、核心架构解析
|
||||||
|
|
||||||
|
### 1. 模块化结构
|
||||||
|
```javascript
|
||||||
|
// store/index.js - 主入口文件
|
||||||
|
import count from './modules/count'
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
count // 启用命名空间的计数模块
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// store/modules/count.js - 计数模块
|
||||||
|
export default {
|
||||||
|
namespaced: true, // 启用命名空间
|
||||||
|
state: {
|
||||||
|
num: 1,
|
||||||
|
sum: 0
|
||||||
|
},
|
||||||
|
mutations: { /* 同步操作 */ },
|
||||||
|
actions: { /* 异步操作 */ }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 数据流示意图
|
||||||
|
```
|
||||||
|
组件 → dispatch → Actions → commit → Mutations → mutate → State → 响应式更新 → 组件
|
||||||
|
```
|
||||||
|
|
||||||
|
## 二、代码优化建议
|
||||||
|
|
||||||
|
### 1. 组件中的优化
|
||||||
|
```javascript
|
||||||
|
// 使用map辅助函数简化代码
|
||||||
|
import { mapActions, mapMutations, mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapState('count', ['sum', 'num'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations('count', ['INCREMENT', 'DECREMENT']),
|
||||||
|
...mapActions('count', ['incrementOdd', 'incrementWait'])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Store 中的优化
|
||||||
|
```javascript
|
||||||
|
// 使用常量替代字符串 mutation 类型
|
||||||
|
const types = {
|
||||||
|
INCREMENT: 'INCREMENT',
|
||||||
|
DECREMENT: 'DECREMENT'
|
||||||
|
}
|
||||||
|
|
||||||
|
const count = {
|
||||||
|
mutations: {
|
||||||
|
[types.INCREMENT](state) {
|
||||||
|
state.sum += state.num
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 三、最佳实践规范
|
||||||
|
|
||||||
|
### 1. 命名规范
|
||||||
|
| 类型 | 命名风格 | 示例 |
|
||||||
|
| -------- | ------------ | ----------------- |
|
||||||
|
| Mutation | 大写+下划线 | `INCREMENT` |
|
||||||
|
| Action | camelCase | `fetchData` |
|
||||||
|
| Getter | 形容词/名词 | `filteredList` |
|
||||||
|
| Module | 业务相关名词 | `user`, `product` |
|
||||||
|
|
||||||
|
### 2. 操作分离原则
|
||||||
|
- **Mutations**：
|
||||||
|
- 只做简单状态赋值
|
||||||
|
- 必须是同步函数
|
||||||
|
- 命名类似事件（`SET_USER_INFO`）
|
||||||
|
|
||||||
|
- **Actions**：
|
||||||
|
- 处理业务逻辑
|
||||||
|
- 可以包含异步操作
|
||||||
|
- 命名类似方法（`fetchUserData`）
|
||||||
|
|
||||||
|
### 3. 模块化建议
|
||||||
|
1. 按功能/业务划分模块
|
||||||
|
2. 每个模块启用命名空间
|
||||||
|
3. 模块内维护独立state
|
||||||
|
|
||||||
|
## 四、高级应用场景
|
||||||
|
|
||||||
|
### 1. 动态模块注册
|
||||||
|
```javascript
|
||||||
|
// 在需要时加载模块
|
||||||
|
store.registerModule('dynamicModule', {
|
||||||
|
// 模块定义
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 表单处理方案
|
||||||
|
```javascript
|
||||||
|
// 使用双向绑定计算属性
|
||||||
|
computed: {
|
||||||
|
num: {
|
||||||
|
get() { return this.$store.state.count.num },
|
||||||
|
set(value) { this.$store.commit('count/UPDATE_NUM', value) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 插件开发
|
||||||
|
```javascript
|
||||||
|
// 持久化插件示例
|
||||||
|
const persistPlugin = store => {
|
||||||
|
store.subscribe((mutation, state) => {
|
||||||
|
localStorage.setItem('vuex_state', JSON.stringify(state))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 五、性能优化技巧
|
||||||
|
|
||||||
|
### 1. 大型状态树
|
||||||
|
- 使用模块懒加载
|
||||||
|
- 避免在state中存储大对象
|
||||||
|
|
||||||
|
### 2. 计算属性缓存
|
||||||
|
```javascript
|
||||||
|
getters: {
|
||||||
|
bigSum: state => {
|
||||||
|
// 复杂计算会被缓存
|
||||||
|
return heavyCalculation(state.sum)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 批量更新
|
||||||
|
```javascript
|
||||||
|
// 合并多个mutation
|
||||||
|
actions: {
|
||||||
|
bulkUpdate({ commit }, payload) {
|
||||||
|
commit('UPDATE_A', payload.a)
|
||||||
|
commit('UPDATE_B', payload.b)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 六、常见问题解决方案
|
||||||
|
|
||||||
|
1. **热重载问题**：
|
||||||
|
```javascript
|
||||||
|
if (module.hot) {
|
||||||
|
module.hot.accept(['./modules/count'], () => {
|
||||||
|
store.hotUpdate({ modules: { count } })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **循环依赖**：
|
||||||
|
- 避免模块间互相引用
|
||||||
|
- 使用全局事件总线处理跨模块通信
|
||||||
|
|
||||||
|
3. **调试技巧**：
|
||||||
|
- 使用Vue Devtools追踪状态变化
|
||||||
|
- 添加logger插件记录mutation
|
||||||
|
|
||||||
|
## 七、与Vue3的Pinia对比
|
||||||
|
|
||||||
|
| 特性 | Vuex | Pinia |
|
||||||
|
| ---------- | ------------ | -------- |
|
||||||
|
| 语法 | 较复杂 | 更简洁 |
|
||||||
|
| 模块化 | 需要配置 | 自动支持 |
|
||||||
|
| TypeScript | 需要额外配置 | 完美支持 |
|
||||||
|
| 体积 | 较大 | 更轻量 |
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>当前求和为:{{ $store.state.count.sum }}</h1>
|
||||||
|
<select v-model.number="$store.state.count.num">
|
||||||
|
<option :value="1">1</option>
|
||||||
|
<option :value="2">2</option>
|
||||||
|
<option :value="3">3</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button @click="increment">+</button>
|
||||||
|
<button @click="decrement">-</button>
|
||||||
|
<button @click="incrementOdd">当前求和为奇数再加</button>
|
||||||
|
<button @click="incrementWait">等一等再加</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CountInfo",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
increment() {
|
||||||
|
this.$store.commit("count/INCREMENT");
|
||||||
|
},
|
||||||
|
decrement() {
|
||||||
|
this.$store.commit("count/DECREMENT");
|
||||||
|
},
|
||||||
|
incrementOdd() {
|
||||||
|
this.$store.dispatch("count/incrementOdd");
|
||||||
|
},
|
||||||
|
incrementWait() {
|
||||||
|
this.$store.dispatch("count/incrementWait");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<template>
|
||||||
|
<Count />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Count from "./compontens/Count.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Demo-4",
|
||||||
|
components: {
|
||||||
|
Count,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 276 B After Width: | Height: | Size: 276 B |
Loading…
Reference in New Issue