观察者

阅读24188

更新时间2025-08-22

Computed 计算属性

模板

具有新旧值的观察者

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

示例

我们在 <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>

Computed 计算属性

模板

RELATED VIDEOS