VUE进阶教程：指令、计算属性和侦听器的详细解析

掌握 VUE 三大核心概念，打造交互丰富且响应迅速的单页面应用

在 VUE 框架中，指令、计算属性和侦听器是不可或缺的三大核心概念，掌握这些技巧将助你打造出具有丰富交互性和响应迅速的单页面应用。本文将为你详细解析这些概念，并通过实战案例加深你的理解。

指令：赋予 HTML 元素超能力

指令是 VUE 为 HTML 元素提供的强力工具，赋予它们额外的行为和属性。内置的指令种类繁多，例如 v-bind、v-model、v-if 和 v-for，还能自由创建自定义指令。

1. 指令修饰符：锦上添花

修饰符为指令添加了额外的功能。例如，.sync 修饰符实现了双向数据绑定，.once 修饰符仅在指令第一次触发时执行操作。

2. v-bind：样式操作的福音

v-bind 指令不仅能绑定属性值，还能动态修改 CSS 类名。使用 v-bind:class，你可以实现元素样式的灵活切换。

3. v-bind：内联样式的掌控者

除了绑定类名，v-bind 还可绑定内联样式。通过 v-bind:style，你拥有了对元素内联样式的精细控制权。

4. v-model：不仅仅是输入框

v-model 指令不仅适用于输入框，也能绑定其他表单元素，如复选框、单选框和下拉列表。

计算属性：声明式的数据计算

计算属性提供了一种简洁的计算数据方式。它允许你基于其他数据源，计算新的数据值，且数据源发生变化时，计算属性也会自动更新。计算属性适合处理复杂的数据逻辑，减少模板中的冗余代码。

1. 基础语法：简单易懂

计算属性的语法很简单，使用 get 方法定义。在 get 方法中，利用其他数据源计算出新的数据值。

2. 计算属性与方法：异曲同工

计算属性和方法都是计算数据的工具，但有关键区别。计算属性声明式且自动更新，而方法命令式且需手动调用。

侦听器：时刻关注数据变化

侦听器允许你监听 VUE 组件中指定数据源的变化。当数据源发生改变时，侦听器函数自动触发，你可以执行相应操作。侦听器适合响应用户交互、状态变化等事件。

1. 基础语法：一目了然

侦听器的语法同样简单，使用 watch 方法定义。在 watch 方法中，指定要监听的数据源，以及数据源变化时的处理函数。

2. 业务实现：千变万化

侦听器可用于实现各种业务需求，例如：

• 实时验证用户输入。
• 组件状态变化时更新 UI。
• 组件销毁时释放资源。

综合案例：水果购物车

为了加深你的理解，让我们构建一个水果购物车案例，演示指令、计算属性和侦听器的综合应用。

1. 渲染水果列表

使用 v-for 循环水果数组，并利用 v-bind 绑定水果名称、数量和价格。

2. 删除和修改数量

使用 v-on 指令绑定点击事件，在事件中执行删除或修改水果数量的操作。

3. 全选反选

使用 v-model 指令绑定全选复选框，实现全选或反选功能。

4. 计算总价

使用计算属性计算水果购物车的总价，并显示在页面上。

5. 本地持久化

使用侦听器监听购物车数据变化，将数据持久化到本地存储中。

总结：三大法宝，纵横 VUE

指令、计算属性和侦听器是 VUE 的三大核心概念，熟练掌握这些技巧将助力你创建出交互丰富且响应迅速的单页面应用。它们如同三把利剑，为你赋予了操控 VUE 数据流和渲染行为的强大能力。

常见问题解答

1. 指令和计算属性的区别是什么？

指令是直接操作 DOM 元素，而计算属性是计算出新的数据值。

2. 侦听器和计算属性的区别是什么？

侦听器监听数据源变化并执行操作，而计算属性仅计算数据。

3. v-model 指令能绑定哪些表单元素？

除了输入框，v-model 指令还能绑定复选框、单选框和下拉列表。

4. 计算属性的完整写法是什么？

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

5. 侦听器的完整写法是什么？

watch: {
  count: {
    handler: function(newVal, oldVal) {
      console.log('Count changed from ' + oldVal + ' to ' + newVal);
    },
    deep: true
  }
}