Vue 观察者
一个 观察者 是一个方法，它观察一个同名的数据属性。
一个 观察者 在数据属性值每次改变时都会运行。
如果某个数据属性值需要采取操作，请使用 观察者。
观察者概念
观察者是我们将在 Vue 实例中学习的第四个配置选项。我们已经看过的前三个配置选项是 'data'、'methods' 和 'computed'。
与 'data'、'methods' 和 'computed' 一样，观察者在 Vue 实例中也有一个保留名称：'watch'。
语法
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;
}
}
}
}
})
自己尝试 »
带有新值和旧值的观察者
除了新的属性值外，先前的属性值也作为输入参数自动提供给观察者方法。
示例
我们在一个 <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 = '该电子邮件地址无效';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = '完美！您已修复！';
this.myClass = 'valid';
}
else {
this.feedbackText = '该电子邮件地址有效 :)';
}
}
}
})
自己尝试 »
观察者与方法
观察者和方法都写成函数，但有很多区别
- 方法 从 HTML 调用。
- 方法 通常在事件发生时被调用。
- 方法 自动将事件对象作为输入接收。
- 我们还可以将我们选择的其他值作为输入发送到 方法 中。
- 观察者 仅在被观察的数据属性值发生变化时被调用，并且这是自动发生的。
- 观察者 自动接收来自被观察属性的新值和旧值。
- 我们不能选择使用 观察者 发送任何其他值作为输入。
观察者与计算属性
观察者和计算属性都写成函数。
观察者和计算属性在依赖项发生变化时都会被自动调用，并且永远不会从 HTML 中调用。
以下是计算属性和观察者之间的一些区别
- 观察者 仅依赖于一个属性，即它们被设置为观察的属性。
- 计算属性 可以依赖于多个属性。
- 计算属性 像数据属性一样使用，不同之处在于它们是动态的。
- 观察者 不被 HTML 引用。
