Vue 2 进阶指南：巧用监听器、计算属性和方法实现响应式编程

监听器 $watch

监听器 $watch 用于监听 Vue 实例中数据的变化，当被监听的数据发生变化时，监听器就会触发相应的回调函数。监听器可以被添加到 Vue 实例、组件或 props 中。

使用监听器 $watch 的语法如下：

vm.$watch('data', (newVal, oldVal) => {
  // 监听器回调函数
})

其中：

• vm：Vue 实例。
• data：要监听的数据属性。
• newVal：数据的新值。
• oldVal：数据的旧值。

例如，以下代码将监听 Vue 实例中 message 数据的变化，当 message 数据发生变化时，监听器回调函数就会被触发，并将 message 的新值和旧值作为参数传递给回调函数：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: (newVal, oldVal) => {
      console.log('message changed from', oldVal, 'to', newVal)
    }
  }
})

监听器 $watch 可以监听嵌套对象中的数据变化。例如，以下代码将监听 Vue 实例中 user.name 数据的变化，当 user.name 数据发生变化时，监听器回调函数就会被触发：

new Vue({
  data: {
    user: {
      name: 'John Doe'
    }
  },
  watch: {
    'user.name': (newVal, oldVal) => {
      console.log('user.name changed from', oldVal, 'to', newVal)
    }
  }
})

监听器 $watch 还可以使用数组来监听多个数据属性的变化。例如，以下代码将监听 Vue 实例中 message 和 count 数据的变化，当 message 或 count 数据发生变化时，监听器回调函数就会被触发：

new Vue({
  data: {
    message: 'Hello Vue!',
    count: 0
  },
  watch: {
    ['message', 'count']: (newVal, oldVal) => {
      console.log('message or count changed')
    }
  }
})

计算属性 computed

计算属性 computed 用于计算和返回一个依赖于 Vue 实例中其他数据的派生数据。计算属性的值是根据其依赖的数据动态计算的，当依赖的数据发生变化时，计算属性的值也会相应地更新。

使用计算属性 computed 的语法如下：

computed: {
  computedName: {
    get() {
      // 计算属性的 getter 函数
      return // 计算属性的值
    }
  }
}

其中：

• computedName：计算属性的名称。
• get：计算属性的 getter 函数。
• return：计算属性的值。

例如，以下代码将创建一个名为 fullName 的计算属性，该计算属性将根据 Vue 实例中 firstName 和 lastName 数据计算并返回一个完整的姓名：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      }
    }
  }
})

计算属性 computed 可以使用数组来依赖多个数据属性。例如，以下代码将创建一个名为 total 的计算属性，该计算属性将根据 Vue 实例中 item1、item2 和 item3 数据计算并返回一个总和：

new Vue({
  data: {
    item1: 1,
    item2: 2,
    item3: 3
  },
  computed: {
    total: {
      get() {
        return this.item1 + this.item2 + this.item3
      }
    }
  }
})

计算属性 computed 还可以使用其他计算属性作为依赖项。例如，以下代码将创建一个名为 fullNameReversed 的计算属性，该计算属性将根据 fullName 计算属性反转字符串并返回一个反向的完整姓名：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      }
    },
    fullNameReversed: {
      get() {
        return this.fullName.split(' ').reverse().join(' ')
      }
    }
  }
})

方法 methods

方法 methods 用于定义 Vue 实例中的方法。方法可以被 Vue 实例、组件或 props 中调用。

使用方法 methods 的语法如下：

methods: {
  methodName() {
    // 方法的实现
  }
}

其中：

• methodName：方法的名称。
• ()：方法的括号。
• // 方法的实现：方法的实现。

例如，以下代码将创建一个名为 sayHello 的方法，该方法将打印 "Hello Vue!" 到控制台：

new Vue({
  methods: {
    sayHello() {
      console.log('Hello Vue!')
    }
  }
})

方法 methods 可以接受参数。例如，以下代码将创建一个名为 greet 的方法，该方法接受一个 name 参数并打印 "Hello " + name 到控制台：

new Vue({
  methods: {
    greet(name) {
      console.log('Hello ' + name)
    }
  }
})

方法 methods 还可以使用 return 语句来返回一个值。例如，以下代码将创建一个名为 sum 的方法，该方法接受两个参数并返回这两个参数的和：

new Vue({
  methods: {
    sum(num1, num2) {
      return num1 + num2
    }
  }
})

区别和使用场景

监听器 $watch、计算属性 computed 和方法 methods 都用于实现响应式编程，但它们在实现和使用上有一些区别。

• 监听器 $watch 用于监听 Vue 实例中数据的变化，当被监听的数据发生变化时，监听器就会触发相应的回调函数。
• 计算属性 computed 用于计算和返回一个依赖于 Vue 实例中其他数据的派生数据。
• 方法 methods 用于定义 Vue 实例中的方法。

一般来说，当您需要在数据发生变化时执行一些操作时，可以使用监听器 $watch。当您需要计算一个派生数据时，可以使用计算属性 computed。当您需要在 Vue 实例中定义一个方法时，可以使用方法 methods。

以下是一些具体的例子：

• 监听器 $watch 可以用于监听表单输入的变化，并在输入发生变化时更新表单的状态。
• 计算属性 computed 可以用于计算一个字符串的长度，并在字符串发生变化时更新字符串的长度。
• 方法 methods 可以用于定义一个提交表单的方法，并在用户点击提交按钮时调用该方法。

总结

Vue 监听器 $watch、计算属性 computed 和方法 methods 都是实现响应式编程的常用方法。它们在实现和使用上有一些区别，但它们都可以帮助您编写出更具响应性和交互性的 Vue 应用。