Vue 侦听属性

最新推荐文章于 2024-09-09 16:42:29 发布

原创

最新推荐文章于 2024-09-09 16:42:29 发布 · 409 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #侦听属性 #watch

Vue实例中的watch选项用于定义数据侦听属性，常用于观察和响应数据变化。尽管计算属性在大多数场景下更为适用，但在需要执行异步操作或控制更新频率时，watch就显得更有优势。举例说明了如何使用watch执行异步操作，以及其相比计算属性的特殊用例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

构造器的 watch 选项，用于定义 Vue 实例的侦听属性。

侦听属性可以用来观察和响应 Vue 实例上的数据变动。

当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

细想一下这个例子：

<div id="demo">{
  
  { fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面的代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

现在，好得多了。