Vue3 监听属性

1.监听属性入门

Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。

以下实例通过使用 watch 实现计数器：

<div id="app">
    <h4>计数器：{{ counter }}h4>
    <button @click="counter++">点我啊button>
div>
<script>
    const app = {
        data() {
            return {
                counter: 1
            }
        }
    }
    vm = Vue.createApp(app).mount('#app')
    // 定义监听器
    vm.$watch('counter', function (nval, oval) {
        alert("计数器变化：" + oval + "变为：" + nval);
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---

2.利用监听器实现千米与米之间的换算

菜鸟教程演示地址

<div id="app">
    千米 : <input type="text" v-model="kilometers" @focus="currentlyActiveField = 'kilometers'">
    米 : <input type="text" v-model="meters" @focus="currentlyActiveField = 'meters'">
div>
<p id="info">p>
<script>
    const app = {
        data() {
            return {
                kilometers: 0,
                meters: 0
            }
        },
        watch: {
            kilometers: function (newValue, oldValue) {
                // 判断是否是当前输入框
                if (this.currentlyActiveField === 'kilometers') {
                    this.kilometers = newValue;
                    this.meters = newValue * 1000
                }
            },
            meters: function (newValue, oldValue) {
                // 判断是否是当前输入框
                if (this.currentlyActiveField === 'meters') {
                    this.kilometers = newValue / 1000;
                    this.meters = newValue;
                }
            }
        }
    }
    vm = Vue.createApp(app).mount('#app')
    vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值

版权声明：本文教程基于菜鸟教程