vue-java-tutorials/vue2-tutorials/import-script/2-数据绑定.md

# Vue2 数据绑定

本示例展示了 Vue2 中的两种数据绑定方式：
- 单向数据绑定 (`v-bind`)
- 双向数据绑定 (`v-model`)

## 核心概念详解

### 1. 数据绑定类型

| 类型     | 指令      | 特点              | 示例                          |
| -------- | --------- | ----------------- | ----------------------------- |
| 单向绑定 | `v-bind`  | 数据→视图单向流动 | `<input v-bind:value="name">` |
| 双向绑定 | `v-model` | 数据⇄视图双向同步 | `<input v-model="name">`      |

### 2. Vue 实例创建方式

```javascript
// 推荐写法 (ES6简写)
data() {
    return {
        name: "数据绑定"
    }
}

// 等价于
data: function() {
    return {
        name: "数据绑定"
    }
}

// 不推荐在组件中使用
data: {
    name: "数据绑定"
}
```

### 3. 动态挂载机制

```javascript
// 延迟挂载示例
setTimeout(() => {
    v.$mount("#app");  // 手动挂载到#app
}, 1000);

// 实例销毁与重建
setTimeout(() => {
    v.$destroy();  // 销毁旧实例
    
    const v2 = new Vue({  // 创建新实例
        data: { name: "新数据绑定" }
    });
    v2.$mount("#root");  // 挂载到新位置
}, 2000);
```

1. **数据绑定选择**：
   - 表单元素使用 `v-model` 实现双向绑定
   - 普通属性使用 `v-bind` 实现单向绑定

2. **实例管理**：
   - 避免在同一个元素上重复挂载不同实例
   - 切换挂载目标时务必先销毁旧实例

3. **数据定义**：
   - 组件中必须使用函数形式返回data对象
   - 根实例可以使用对象形式

4. **性能优化**：
   - 大量数据绑定时考虑使用计算属性
   - 复杂场景可使用自定义指令优化

## 扩展说明

### 1. `v-model` 原理
`v-model` 本质上是语法糖，等价于：
```html
<input 
  :value="name" 
  @input="name = $event.target.value">
```

### 2. 挂载方式对比
| 方式       | 示例                | 适用场景             |
| ---------- | ------------------- | -------------------- |
| el选项     | `el: "#app"`        | 初始化时确定挂载点   |
| $mount方法 | `vm.$mount("#app")` | 需要延迟或条件挂载时 |

### 3. 实例生命周期
- `new Vue()` 创建实例
- `$mount()` 触发挂载流程
- `$destroy()` 触发销毁流程

通过本文档，您可以全面了解 Vue2 的数据绑定机制和实例管理方法，为实际开发提供参考。