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 实例创建方式

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

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

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

3. 动态挂载机制

// 延迟挂载示例
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 本质上是语法糖，等价于：

<input 
  :value="name" 
  @input="name = $event.target.value">

2. 挂载方式对比

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

3. 实例生命周期

• new Vue() 创建实例
• $mount() 触发挂载流程
• $destroy() 触发销毁流程

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