3.2.4 使用表达式-Vue.js从入门到精通(一)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(一)

### 3.2.4 使用表达式

在Vue.js中，表达式占据了核心地位，它们是连接数据和DOM的关键桥梁。通过表达式，Vue能够动态地渲染视图，使数据的变化即时反映到页面上，同时，也能让开发者在模板中执行简单的逻辑运算和函数调用。本章将深入探讨Vue.js中表达式的使用，包括基础语法、类型、操作符、计算属性以及侦听器等方面的内容。

#### 3.2.4.1 表达式基础

Vue.js模板中的表达式被包裹在双大括号`{{ }}`中，这是Vue用于输出数据到DOM的插值表达式。这些表达式支持JavaScript表达式的大部分语法，但需要注意的是，它们被设计为简洁地输出数据，因此不应包含复杂的逻辑或副作用（即，不应直接修改数据）。

```html
<div id="app">
  
  <p>{{ message }}</p>
  
  
  <p>{{ count * 2 }}</p>
  
  
  <p>{{ isVisible ? 'Visible' : 'Hidden' }}</p>
</div>

在上面的例子中，`{{ message }}`、`{{ count * 2 }}`和`{{ isVisible ? 'Visible' : 'Hidden' }}`都是表达式，它们分别输出了变量`message`的值、`count`变量的两倍值，以及根据`isVisible`的真假条件返回不同的字符串。

#### 3.2.4.2 表达式类型

Vue.js中的表达式主要处理JavaScript的原生类型，包括字符串、数字、布尔值、数组、对象以及函数等。你可以直接在表达式中使用这些类型，但请记住，表达式的结果最终会被转换成字符串来插入到模板中（除非它被用于特定的指令，如`v-bind`）。

- **字符串与数字**：如上例所示，字符串和数字可以直接在表达式中使用。
- **布尔值**：布尔值常用于条件渲染，如结合`v-if`、`v-show`等指令。
- **数组与对象**：在表达式中可以直接访问数组的元素和对象的属性，但注意路径的准确性和访问深度。
- **函数**：虽然表达式主要用于输出数据，但也可以调用返回值的函数。不过，由于表达式的简洁性要求，建议将复杂的逻辑放在Vue的methods或computed属性中。

#### 3.2.4.3 表达式中的操作符

Vue.js模板中的表达式支持JavaScript的许多操作符，包括但不限于算术操作符（`+`、`-`、`*`、`/`、`%`）、比较操作符（`==`、`!=`、`>`、`<`、`>=`、`<=`）、逻辑操作符（`&&`、`||`、`!`）以及字符串操作符（`+`用于连接字符串）等。

使用这些操作符可以在模板中执行简单的计算和逻辑判断，但请注意避免在模板中编写过于复杂的逻辑，以保持模板的清晰和易于维护。

#### 3.2.4.4 计算属性

当表达式变得复杂时，将它们放入Vue实例的`computed`属性中是一个更好的选择。计算属性基于它们的依赖进行缓存，只有当相关依赖发生改变时才会重新求值。这使得计算属性非常适合执行复杂的数据转换或组合多个数据项的结果。

```javascript
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      // 这个计算属性会返回 firstName 和 lastName 的组合
      return this.firstName + ' ' + this.lastName;
    }
  }
});
```

在模板中，你可以像使用普通数据属性一样使用计算属性：

```html
<p>{{ fullName }}</p>
```

#### 3.2.4.5 侦听器

虽然计算属性通常是处理复杂逻辑的首选方式，但Vue也提供了侦听器（watchers）作为响应数据变化的另一种方式。侦听器允许你执行异步操作或开销较大的操作，而不必担心它们会影响DOM的渲染性能。

侦听器在Vue实例的`watch`选项中以对象的形式定义，键是需要侦听的响应式属性名，值是一个回调函数，当属性值变化时调用。

```javascript
new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 当 question 发生变化时，这个函数会被调用
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...';
      this.debouncedGetAnswer();
    }
  },
  created: function () {
    // 示例：使用 lodash 的 debounce 方法来延迟获取答案
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)';
        return;
      }
      this.answer = 'Thinking...';
      // 这里可以是异步调用API获取答案的代码
      this.answer = 'Answered!';
    }
  }
});
```

在上面的例子中，`watch`属性用于侦听`question`数据的变化，并触发`getAnswer`方法（通过`debouncedGetAnswer`，一个经过防抖处理的函数）来异步处理数据变化。

#### 3.2.4.6 小结

Vue.js中的表达式是连接数据和视图的桥梁，它们提供了在模板中执行简单逻辑和计算的能力。然而，为了保持模板的清晰和高效，应避免在表达式中编写复杂的逻辑。对于更复杂的场景，建议使用计算属性或侦听器来处理。计算属性适用于同步计算，并基于依赖缓存结果；而侦听器则更适合处理异步操作或执行开销较大的逻辑。通过合理使用这些特性，你可以构建出既高效又易于维护的Vue.js应用。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(一)

Vue原理与源码解析

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)

移动端开发指南

Vue.js从入门到精通(二)

Vue面试指南

Vue3技术解密

Vue源码完全解析

TypeScript和Vue从入门到精通(五)

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)