【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景

前言

Vue.js 是一款流行的 JavaScript 框架，它提供了一种响应式的数据绑定机制，使得数据的变化能够自动更新到视图上。

在 Vue.js 中，有三种常用的响应式数据变化的方式，分别是监听器 $watch、计算属性 computed 和方法 methods。本文将分别介绍这三种方式的区别、示例以及适用场景。

Vue 监听器 $watch

定义及作用

Vue 监听器 $watch 是一种用于在数据发生变化时执行自定义逻辑的方法。可以使用 $watch 函数在 Vue 实例中定义一个监听器，用于监视某个数据的变化并在变化时执行相应的代码。

示例

下面是一个使用 $watch 函数来监听 msg 变量的示例：

new Vue({
  data: {
    msg: 'hello world'
  },
  watch: {
    msg: function(newValue, oldValue) {
      console.log(`msg 从 ${oldValue} 变成了 ${newValue}`)
    }
  }
})

使用场景

• 监听数据变化并在变化时执行特定操作；
• 需要手动控制监听器的添加和移除；
• 数据变化后需要执行异步操作。

Vue 计算属性 computed

定义及作用

Vue 计算属性 computed 是一种用于在模板中动态计算数据的方法。计算属性会根据依赖的数据进行缓存，只有当依赖的数据发生变化时才会重新计算。

示例

下面是一个计算属性 fullName 的示例，它会根据 firstName 和 lastName 计算出完整的姓名：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

在模板中使用计算属性 fullName：

<p>{{ fullName }}p>

使用场景

需要根据多个数据计算出一个新值；
需要在模板中动态计算数据；
需要对计算结果进行缓存。

Vue 方法 methods

定义及作用

Vue 方法 methods 是一种在 Vue 实例中定义方法的方式，可以在模板中使用事件来调用方法。

示例

下面是一个在 methods 中定义的 greet 方法的示例：

new Vue({
  data: {
    name: 'John'
  },
  methods: {
    greet: function() {
      alert(`Hello, ${this.name}!`)
    }
  }
})

在模板中使用 greet 方法：

<button @click="greet">Say Hellobutton>

使用场景

• 处理用户事件（如点击事件、输入事件等）；
• 在模板中执行一些逻辑；
• 需要接受参数并返回结果。

总结

综上所述，Vue 监听器 $watch、计算属性 computed 和方法 methods 都有自己的适用场景，可以根据具体需求进行选择和使用。