147 lines
3.6 KiB
Markdown
147 lines
3.6 KiB
Markdown
|
# Vue2 数据代理机制详解
|
|||
|
|
|
|||
|
|
## 一、核心概念
|
|||
|
|
|
|||
|
|
Vue2 中的数据代理是指 Vue 实例（vm）代理其 `data` 对象中属性的访问和修改操作。通过这种机制，我们可以直接通过 `vm.xxx` 访问 `data` 中的属性，而不需要写 `vm._data.xxx`。
|
|||
|
|
|
|||
|
|
## 二、代码示例解析
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<div id="app">
|
|||
|
|
Vue中的数据代理: <span>{{name}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const vm = new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: {
|
|||
|
|
name: "代理..."
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 三、实现原理
|
|||
|
|
|
|||
|
|
### 1. 数据存储结构
|
|||
|
|
- 原始 `data` 对象被存储在 `vm._data` 属性中
|
|||
|
|
- 通过 `Object.defineProperty` 将 `data` 的属性代理到 Vue 实例上
|
|||
|
|
|
|||
|
|
### 2. 验证方法
|
|||
|
|
```javascript
|
|||
|
|
// 验证代理关系
|
|||
|
|
const externalData = { name: "代理..." };
|
|||
|
|
const vm = new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: externalData
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(vm._data === externalData); // true
|
|||
|
|
console.log(vm.name === vm._data.name); // true
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 代理实现机制
|
|||
|
|
Vue 内部大致执行了以下操作：
|
|||
|
|
```javascript
|
|||
|
|
// 伪代码展示代理原理
|
|||
|
|
Object.keys(data).forEach(key => {
|
|||
|
|
Object.defineProperty(vm, key, {
|
|||
|
|
get() {
|
|||
|
|
return vm._data[key];
|
|||
|
|
},
|
|||
|
|
set(value) {
|
|||
|
|
vm._data[key] = value;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 四、数据流图示
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
模板访问
|
|||
|
|
↓
|
|||
|
|
vm.name (代理访问)
|
|||
|
|
↓
|
|||
|
|
vm._data.name (实际数据存储)
|
|||
|
|
↓
|
|||
|
|
数据劫持 (响应式系统)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 五、关键特性
|
|||
|
|
|
|||
|
|
| 特性 | 说明 | 示例 |
|
|||
|
|
| ---------- | ---------------------- | ------------------------------ |
|
|||
|
|
| 直接访问 | 省略 `_data` 前缀 | `vm.name` 代替 `vm._data.name` |
|
|||
|
|
| 响应式绑定 | 代理属性也是响应式的 | 修改 `vm.name` 会触发视图更新 |
|
|||
|
|
| 数据隔离 | `_data` 保存原始数据 | 防止直接修改破坏响应式 |
|
|||
|
|
| 统一入口 | 提供一致的数据访问方式 | 简化模板和方法的编写 |
|
|||
|
|
|
|||
|
|
## 六、与数据劫持的关系
|
|||
|
|
|
|||
|
|
1. **数据代理**：
|
|||
|
|
- 解决的是访问便捷性问题（`vm.xxx` vs `vm._data.xxx`）
|
|||
|
|
- 通过 `Object.defineProperty` 实现属性转发
|
|||
|
|
|
|||
|
|
2. **数据劫持**：
|
|||
|
|
- 解决的是响应式问题（数据变化触发视图更新）
|
|||
|
|
- 在 `vm._data` 上实现，通过重写 getter/setter
|
|||
|
|
|
|||
|
|
3. **协作流程**：
|
|||
|
|
- 模板访问 `{{name}}` → 触发代理 getter
|
|||
|
|
- 代理 getter 访问 `_data.name` → 触发劫持 getter
|
|||
|
|
- 建立依赖收集关系
|
|||
|
|
|
|||
|
|
## 七、注意事项
|
|||
|
|
|
|||
|
|
1. **新增属性**：
|
|||
|
|
- 直接 `vm.newProp = value` 不会成为响应式
|
|||
|
|
- 必须使用 `Vue.set` 或预先声明
|
|||
|
|
|
|||
|
|
2. **性能影响**：
|
|||
|
|
- 每个代理属性都会产生一定的内存开销
|
|||
|
|
- 大型项目应考虑分模块管理数据
|
|||
|
|
|
|||
|
|
3. **调试技巧**：
|
|||
|
|
- 通过 `vm._data` 查看原始数据
|
|||
|
|
- 使用 Vue Devtools 观察数据变化
|
|||
|
|
|
|||
|
|
4. **与 Vue3 区别**：
|
|||
|
|
- Vue3 使用 Proxy 实现更完善的代理
|
|||
|
|
- 可以检测属性添加/删除操作
|
|||
|
|
|
|||
|
|
## 八、扩展应用
|
|||
|
|
|
|||
|
|
### 1. 自定义代理逻辑
|
|||
|
|
```javascript
|
|||
|
|
// 在Vue实例上添加自定义代理
|
|||
|
|
created() {
|
|||
|
|
Object.defineProperty(this, 'fullName', {
|
|||
|
|
get() {
|
|||
|
|
return `${this.firstName} ${this.lastName}`;
|
|||
|
|
},
|
|||
|
|
set(value) {
|
|||
|
|
const parts = value.split(' ');
|
|||
|
|
this.firstName = parts[0];
|
|||
|
|
this.lastName = parts[1] || '';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 代理模式应用
|
|||
|
|
```javascript
|
|||
|
|
// 实现组件间的数据代理
|
|||
|
|
const proxyMixin = {
|
|||
|
|
methods: {
|
|||
|
|
proxy(prop) {
|
|||
|
|
return {
|
|||
|
|
get: () => this[prop],
|
|||
|
|
set: (val) => this[prop] = val
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|