Vue Watcher

• watcher 是一种监视具有相同名称的数据属性的方法。
• 每次数据属性值更改时都会运行一个 watcher。
• 如果某个数据属性值需要操作，请使用 watcher。

Watcher 概念

Watcher 是 Vue 实例中的第四个配置选项，我们将学习它。我们已经看到的前三个配置选项是 'data', 'methods' 和 'computed'。

与 'data', 'methods' 和 'computed' Watcher 在 Vue 实例中也有一个保留名称：'watcher'。

语法

const app = Vue.createApp({
  data() {
    ...
  },
  watch: {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
})

如教程开始所述，Watcher 具有相同名称的数据属性。

我们从不调用 Watcher 方法。只有当特性值更改时才会自动调用它。

新属性值始终可用作 Watcher 方法的输入参数，旧值也是如此。

实例

<input type="range"> 元素用于更改值 'rangeVal'。Watcher 用于防止用户选择 20 到 60 之间被认为是非法的值。

<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>

const app = Vue.createApp({
  data() {
    rangeVal: 70
  },
  watch: {
    rangeVal(val){
      if( val>20 && val<60) {
        if(val<40){
          this.rangeVal = 20;
        }
        else {
          this.rangeVal = 60;
        }
      }
    }
  }
})

Watcher 的新和旧值

除了新的属性值之外，上一个属性值也可以自动作为 Watcher 方法的输入参数。

实例

我们在 <div> 元素上设置了点击事件，用方法 'updatePos' 记录鼠标指针 x 位置 'xPos'。Watcher 通过使用 Watcher 方法的新旧输入参数来计算新的 x 位置与前一个 x 位置之间的像素差。

<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>

const app = Vue.createApp({
  data() {
    xPos: 0,
    xDiff: 0
  },
  watch: {
    xPos(newVal,oldVal){
      this.xDiff = newVal-oldVal
    }
  },
  methods: {
    updatePos(evt) {
      this.xPos = evt.offsetX
    }
  }
})

我们还可以使用新和旧的值在输入从无效变为有效的确切时刻向用户提供反馈：

实例

<input> 元素中的值连接到一个观察程序。如果该值包含 '@'，则视为有效的 Email。用户会得到一个反馈文本，通知输入是有效的、无效的，还是在最后一次点击时才有效。

<input v-type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>

const app = Vue.createApp({
  data() {
    inpAddress: '',
    feedbackText: '',
    myClass: 'invalid'
  },
  watch: {
    inpAddress(newVal,oldVal) {
      if( !newVal.includes('@') ) {
        this.feedbackText = 'The e-mail address is NOT valid';
        this.myClass = 'invalid';
      }
      else if( !oldVal.includes('@') && newVal.includes('@') ) {
        this.feedbackText = 'Perfect! You fixed it!';
        this.myClass = 'valid';
      }
      else {
        this.feedbackText = 'The e-mail address is valid :)';
      }
    }
  }
})

Watcher 对比方法

Watcher 和方法都被写成函数，但有很多不同之处：

• 方法是从 HTML 中调用的。
• 方法通常在事件发生时调用。
• 方法自动接收事件对象作为输入。
• 我们还可以发送我们选择的其他值作为方法的输入。
• 只有当被监视的数据属性值发生更改时，才会调用 Watcher，并且这种情况会自动发生。
• Watcher 会自动接收来自被观察属性的新值和旧值。
• 我们不能选择以 Watcher 作为输入发送任何其他值。

Watcher 对比计算属性

Watcher 和计算属性都被写成函数。

当依赖项发生变化时，Watcher 和计算属性都会自动调用，而从不从 HTML 调用。

以下是计算属性和 Watcher 之间的一些差异：

• Watcher 只依赖于一个属性，即他们设置监听的属性。
• 计算属性可以依赖于许多属性。
• 计算属性与数据属性一样使用，只是它们是动态的。
• Watcher 不是从 HTML 中引用的。