vue教程-侦听属性(监听属性)、侦听器(监听器)(watch)-废弃 作者:马育民 • 2022-01-25 17:01 • 阅读:10079 # 废弃废弃 详见:https://www.malaoshi.top/show_1IX6lguvpO5O.html # 说明 vue可以通过 **侦听器**(**watch**),侦听属性,当属性值变化时,自动调用函数 **注意:**监听属性必须存在,才能进行侦听 > 侦听属性(官网叫法)有时也成为 监听属性、侦听器、监听器 ### 应用场景 - 与 **计算属性** 功能类似,计算属性能实现的功能,侦听属性也都能实现,但一般较麻烦 - **校验**,输入的数据不符合要求,给出提示。如:价格是 **负数** 或 **大于最大值** 时,给出提示 - 在数据变化时,发送 **ajax请求**,如:百度的输入框的提示 # 根据生日计算年龄 ### 配置实现(完整写法) 实现下面功能,在一个输入框,输入出生年月日,就能计算出年龄,如下: [![](http://65242847.gitee.io/pic/vue/Snipaste_2022-01-20_21-51-22.png)](http://65242847.gitee.io/pic/vue/Snipaste_2022-01-20_21-51-22.png) 代码如下: ``` 输入出生年份: 年龄:{{age}}(表达式只写监听属性名,会自动调用 监听方法) 年龄:{{age}} 年龄:{{age}} 年龄:{{age}}(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法) ``` **注意:**监听属性必须存在,才能进行侦听 ##### 特点 - 当属性 `birthday` 的值 改变时,才会触发执行 `handler()` 函数 - 函数名必须是 `handler()` - 会缓存结果,如:显示4个年龄,每次只执行1次 函数。可以提高 **性能** ### 配置实现(简化写法) ``` 输入出生年份: 年龄:{{age}}(表达式只写监听属性名,会自动调用 监听方法) 年龄:{{age}} 年龄:{{age}} 年龄:{{age}}(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法) ``` ### 动态实现 动态实现侦听属性,一般较少使用 ``` 输入出生年份: 年龄:{{age}}(表达式只写监听属性名,会自动调用 监听方法) 年龄:{{age}} 年龄:{{age}} 年龄:{{age}}(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法) ``` # 校验-价格 当输入价格是负数时,给出提示 引入 vue.js: ``` ``` 样式: ``` ``` 主体代码: ``` 价格:{{price_warn}} ``` # immediate 属性 侦听器有 `immediate` 属性,为 true时,表示初始化时就执行函数,默认为false ``` 输入出生年份: 年龄:{{age}}(表达式只写监听属性名,会自动调用 监听方法) 年龄:{{age}} 年龄:{{age}} 年龄:{{age}}(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法) ``` **解释:** 当 `immediate` 是 `true` ,刷新页面时,就会执行 `handler()` 函数 # 异步执行 延时1秒后执行 ``` 输入出生年份: 年龄:{{age}}(表达式只写监听属性名,会自动调用 监听方法) 年龄:{{age}} 年龄:{{age}} 年龄:{{age}}(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法) ``` 原文出处:http://malaoshi.top/show_1IX2evQAXDBQ.html