编辑“︁Vue.js数据绑定”︁

= Vue.js数据绑定 =

'''Vue.js数据绑定'''是Vue.js框架的核心特性之一，它允许开发者将数据模型（Model）与用户界面（View）自动同步。当数据发生变化时，视图会自动更新，反之亦然。这种机制减少了手动DOM操作的需求，提高了开发效率。

== 介绍 ==
Vue.js的数据绑定基于响应式系统实现。当创建一个Vue实例时，Vue会遍历data对象的所有属性，并使用Object.defineProperty()（Vue 2.x）或Proxy（Vue 3.x）将它们转换为getter/setter。这使得Vue能够追踪依赖关系，并在属性被访问或修改时通知变更。

数据绑定主要分为两种形式：
* '''单向数据绑定'''：数据从模型流向视图（Model → View）
* '''双向数据绑定'''：数据在模型和视图之间双向流动（Model ↔ View）

== 单向数据绑定 ==
单向数据绑定使用Mustache语法（双大括号）或v-bind指令实现。

=== Mustache语法 ===
<syntaxhighlight lang="html">
<div id="app">
  {{ message }}
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</syntaxhighlight>

'''输出'''：
<div>Hello Vue!</div>

=== v-bind指令 ===
v-bind用于绑定HTML属性：

<syntaxhighlight lang="html">
<div id="app">
  <span v-bind:title="message">
    鼠标悬停查看动态绑定的提示信息
  </span>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
</syntaxhighlight>

== 双向数据绑定 ==
双向数据绑定使用v-model指令实现，主要用于表单输入元素。

<syntaxhighlight lang="html">
<div id="app">
  <input v-model="message" placeholder="编辑我">
  <p>输入的内容是：{{ message }}</p>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</syntaxhighlight>

'''工作原理'''：
1. 用户在输入框中输入内容
2. Vue检测到输入变化，更新data中的message
3. 更新后的message通过Mustache语法显示在<p>标签中

== 响应式原理 ==
Vue的数据绑定基于响应式系统，其核心流程如下：

<mermaid>
graph TD
    A[初始化Vue实例] --> B[遍历data属性]
    B --> C[转换为getter/setter]
    C --> D[收集依赖]
    D --> E[属性被修改]
    E --> F[通知Watcher]
    F --> G[更新视图]
</mermaid>

数学上，可以表示为：
<math>
\frac{d(View)}{dt} = f(Data)
</math>
其中视图的变化率是数据状态的函数。

== 高级用法 ==

=== 计算属性 ===
计算属性是基于它们的响应式依赖进行缓存的。

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})
</syntaxhighlight>

=== 监听器 ===
当需要在数据变化时执行异步或开销较大的操作时，使用watch选项。

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    question: '',
    answer: '请先提出问题'
  },
  watch: {
    question: function(newQuestion) {
      this.answer = '正在思考...'
      // 这里可以添加异步操作
    }
  }
})
</syntaxhighlight>

== 实际案例 ==

=== 购物车价格计算 ===
<syntaxhighlight lang="html">
<div id="app">
  <div v-for="item in cartItems" :key="item.id">
    {{ item.name }} - 单价: {{ item.price }} × 
    <input v-model.number="item.quantity" type="number" min="1">
    = {{ item.price * item.quantity | currency }}
  </div>
  <p>总价: {{ totalPrice | currency }}</p>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    cartItems: [
      { id: 1, name: '商品A', price: 100, quantity: 1 },
      { id: 2, name: '商品B', price: 200, quantity: 2 }
    ]
  },
  computed: {
    totalPrice: function() {
      return this.cartItems.reduce((sum, item) => {
        return sum + (item.price * item.quantity)
      }, 0)
    }
  },
  filters: {
    currency: function(value) {
      return '¥' + value.toFixed(2)
    }
  }
})
</syntaxhighlight>

== 注意事项 ==
1. Vue无法检测到对象属性的添加或删除，需要使用Vue.set方法
2. 对于数组，直接通过索引设置项或修改长度不会被检测到，应使用变异方法（push, pop, shift等）或Vue.set
3. 在大型应用中，过度使用双向绑定可能影响性能，应考虑使用单向数据流

== 总结 ==
Vue.js的数据绑定机制大大简化了前端开发中的数据管理，通过响应式系统实现了数据和视图的自动同步。从简单的文本插值到复杂的表单处理，数据绑定都是Vue应用开发的基础。理解其工作原理和最佳实践，对于构建高效、可维护的Vue应用至关重要。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]