vue教程-侦听属性（监听属性）、侦听器（监听器）（watch）-废弃-马育民老师

# 废弃废弃

详见：https://www.malaoshi.top/show_1IX6lguvpO5O.html

# 说明

vue可以通过 **侦听器**（**watch**），侦听属性，当属性值变化时，自动调用函数

**注意：**监听属性必须存在，才能进行侦听

> 侦听属性（官网叫法）有时也成为 监听属性、侦听器、监听器

### 应用场景

- 与 **计算属性** 功能类似，计算属性能实现的功能，侦听属性也都能实现，但一般较麻烦
- **校验**，输入的数据不符合要求，给出提示。如：价格是 **负数** 或 **大于最大值** 时，给出提示
- 在数据变化时，发送 **ajax请求**，如：百度的输入框的提示

# 根据生日计算年龄

### 配置实现（完整写法）

实现下面功能，在一个输入框，输入出生年月日，就能计算出年龄，如下：

[![](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-01-20_21-51-22.png)](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-01-20_21-51-22.png)

代码如下：

```
<div id="app">
    输入出生年份：<input type="text" v-model="birthday"><br>
    年龄：<span>{{age}}</span>（表达式只写监听属性名，会自动调用 监听方法）<br>
    年龄：<span>{{age}}</span><br>
    年龄：<span>{{age}}</span><br>
    年龄：<span>{{age}}</span>（计算属性会缓存结果，如：显示4次年龄，初始化时只执行1次监听方法）
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

**注意：**监听属性必须存在，才能进行侦听

##### 特点

- 当属性 `birthday` 的值 改变时，才会触发执行 `handler()` 函数
- 函数名必须是 `handler()`
- 会缓存结果，如：显示4个年龄，每次只执行1次 函数。可以提高 **性能**

### 配置实现（简化写法）

}
        }
    })
</script>
```

### 动态实现

动态实现侦听属性，一般较少使用

# 校验-价格

当输入价格是负数时，给出提示

引入 vue.js：
```
<script src="js/vue.js"></script>
```

样式：
```
<style>
    .warn{
        color:red;
        margin-left: 10px;
    }
</style>
```

主体代码：
```
<div id="app">
    价格：<input type="text" v-model.number="price"><span class="warn">{{price_warn}}</span><br>
</div>
<script>
    var app = new Vue({
        el: '#app', //el是element缩写
        data: { //数据
            price:undefined, // 价格
            price_warn:"", // 当价格不正确时，给出的警告
        },
        watch:{
            price:{ // 监听price属性
                // handler 必须是这个名字
                //newVal：修改后的值
                //oldVal  修改前的值
                handler:function(newVal,oldVal){
                    console.log("newVal:",newVal,"--oldVal:",oldVal)
                    console.log("newVal类型:",typeof newVal,"--oldVal类型:",typeof oldVal)
                    if( newVal < 0){ //
                        this.price_warn = "价格不能是负数！"
                    }else{
                        this.price_warn = ""
                    }
                }
            }
        }
    })
</script>
```

# immediate 属性

侦听器有 `immediate` 属性，为 true时，表示初始化时就执行函数，默认为false

**解释：** 当 `immediate` 是 `true` ，刷新页面时，就会执行 `handler()` 函数

# 异步执行

延时1秒后执行

</script>
```

原文出处：http://malaoshi.top/show_1IX2evQAXDBQ.html