码农教程 - 一技在手,衣食无忧! tools

Vue 观察者

❮ 上一节 下一节 ❯

观察者是一种监视同名数据属性的方法。

观察者每次数据属性值更改时运行。

用一个观察者如果某个数据属性值需要执行操作。

观察者概念

Watchers 是我们将要学习的 Vue 实例中的第四个配置选项。我们已经看过的前三个配置选项是“数据”、“方法”和“计算”。

与“数据”一样，“方法”和“计算”观察者在 Vue 实例中也有一个保留名称：'手表'。

语法

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

正如顶部绿色区域中提到的，观察者监视具有相同名称的数据属性。

我们从不调用观察者方法。仅当属性值更改时才会自动调用。

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

示例

一个<input type="range">元素用于更改值“rangeVal”。观察程序用于防止用户选择 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;
        }
      }
    }
  }
})
亲自试一试 »

具有新旧值的观察者

除了新的属性值之外，以前的属性值也会自动用作观察程序方法的输入参数。

示例

我们在a上设置点击事件<div>使用“updatePos”方法记录鼠标指针 x 位置“xPos”的元素。观察者使用观察者方法的新旧输入参数来计算新的 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>元素连接到观察者。如果该值包含“@”，则被视为有效的电子邮件地址。用户会收到反馈文本，以告知输入是否有效、无效，或者上次击键后输入是否有效。

<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 :)';
      }
    }
  }
})
亲自试一试 »

观察者与方法

观察者和方法都写成函数，但有很多区别：

  • 方法从 HTML 调用。
  • 方法事件发生时经常被调用。
  • 方法自动接收事件对象作为输入。
  • 我们还可以将我们选择作为输入的其他值发送到方法。
  • 观察者仅当监视的数据属性值发生变化时才会调用，并且这是自动发生的。
  • 观察者自动从监视的属性接收新值和旧值。
  • 我们不能选择发送任何其他值观察者作为输入。

观察者与计算属性

观察者和计算属性都被编写为函数。

当依赖项更改时，观察程序和计算属性都会自动调用，而不会从 HTML 中调用。

以下是计算属性和观察者之间的一些区别：

  • 观察者只依赖于一个属性，即他们设置为监视的属性。
  • 计算属性可以取决于许多属性。
  • 计算属性与数据属性一样使用，但它们是动态的。
  • 观察者不从 HTML 中引用。

Vue练习

通过练习测试一下

练习:

本练习中的观察者应该在每次“rangeVal”数据属性发生变化时将“count”数据属性加一。

观察者必须被称为什么？

<script>
  const app = Vue.createApp({
    data() {
      return {
      	rangeVal: 70,
        count: 0
      }
    },
    watch: {
      () {
        this.count++
      }
    }
  })
 app.mount('#app')
</script>

开始练习


❮ 上一节 下一节 ❯