Vue中watch和computed如何使用？Vue中watch和computed有什么区别？

最新推荐文章于 2024-03-13 16:09:59 发布

前端筱悦

最新推荐文章于 2024-03-13 16:09:59 发布

阅读量372

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/tyxjolin/article/details/130192121

版权

本文详细介绍了Vue.js中的watch和computed特性，它们分别用于监听数据变化和计算属性。watch在数据变化时执行回调，而computed具有缓存机制，仅在依赖项变更时重新计算。文章强调了两者在处理数据和更新DOM时的不同用途，并提供了使用示例，帮助开发者选择合适的方法来优化前端应用性能。

摘要由CSDN通过智能技术生成

Vue.js是一个流行的JavaScript前端框架，它允许开发人员构建交互性强、易于维护和扩展的现代Web应用程序。Vue.js具有许多功能，其中最重要的两个是“watch”和“computed”。本文将深入探讨这两个功能，并说明它们如何在Vue.js应用程序中使用。

一、Vue.js简介

Vue.js是一个轻量级的JavaScript前端框架，它具有以下功能：

响应式数据绑定：Vue.js采用双向数据绑定机制，使得当数据发生变化时，视图会自动更新，而当视图发生变化时，数据也会自动更新。
组件化开发：Vue.js将整个应用程序拆分为多个可重用的组件，使得应用程序易于维护和扩展。
模板语法：Vue.js使用简单易懂的模板语法，使得开发人员可以更加专注于业务逻辑。
指令：Vue.js提供了一些内置指令，例如“v-if”、“v-for”、“v-bind”等，使得开发人员可以轻松地操作DOM。

Vue.js中最重要的两个功能是“watch”和“computed”，它们都是用于处理数据的。

二、Vue中的watch

“watch”是Vue.js中的一个重要功能，它用于监听数据变化并执行一些操作。当数据发生变化时，watch会自动调用指定的函数。

下面是一个示例：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal);
    }
  }
})

在上面的代码中，我们定义了一个Vue实例，并在“data”属性中定义了一个名为“message”的变量。我们还定义了一个“watch”属性，以监听“message”变量的变化。当“message”变量的值发生变化时，Vue.js会自动调用指定的函数，并将新值和旧值作为参数传递。

三、Vue中的computed

“computed”是Vue.js中的另一个重要功能，它用于计算数据并返回结果。computed是一个带有getter和setter方法的属性，当依赖的数据发生变化时，computed会自动重新计算值。

下面是一个示例：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

在上面的代码中，我们定义了一个Vue实例，并在“data”属性中定义了一个名为“message”的变量。我们还定义了一个“computed”属性，以计算名为“reversedMessage”的属性。该属性返回将“message”变量中的字符反转后的结果。当“message”变量的值发生变化时，Vue.js会自动重新计算“reversedMessage”属性的值。

四、watch和computed的区别

虽然watch和computed都用于处理数据，但它们之间有一些关键区别。

计算属性只有getter，没有setter，它们不能改变原始数据。相反，watch可以监听数据变化并执行任何逻辑。
计算属性具有缓存机制，只有依赖的数据发生变化时才会重新计算。相反，watch无缓存，每当指定的数据发生变化时，watch都会重新运行函数。
计算属性只有在模板中使用时才会计算，而watch在任何时候都可以运行。

在实践中，当我们需要实时更新DOM时，应该使用watch。当我们需要基于多个数据计算一个属性值时，应该使用computed。

五、使用watch和computed

下面是一些在Vue.js应用程序中使用watch和computed的示例。

使用watch
```
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal);
    }
  }
})
```
在上面的代码中，我们定义了一个Vue实例，并在“data”属性中定义了一个名为“message”的变量。我们还定义了一个“watch”属性，以监听“message”变量的变化。当“message”变量的值发生变化时，Vue.js会自动调用指定的函数，并将新值和旧值作为参数传递。
使用computed
```
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
})
```
在上面的代码中，我们定义了一个Vue实例，并在“data”属性中定义了一个名为“message”的变量。我们还定义了一个“computed”属性，以计算名为“reversedMessage”的属性。该属性返回将“message”变量中的字符反转后的结果。当“message”变量的值发生变化时，Vue.js会自动重新计算“reversedMessage”属性的值。

六、总结

在本文中，我们学习了Vue.js中的两个最重要的功能：watch和computed。虽然它们都用于处理数据，但它们之间有一些关键区别。计算属性只有getter，没有setter，它们不能改变原始数据。相反，watch可以监听数据变化并执行任何逻辑。计算属性具有缓存机制，只有依赖的数据发生变化时才会重新计算。相反，watch无缓存，每当指定的数据发生变化时，watch都会重新运行函数。在实践中，当我们需要实时更新DOM时，应该使用watch。当我们需要基于多个数据计算一个属性值时，应该使用computed。

在使用watch和computed时，我们需要牢记一些最佳实践：