声明：本文转载自https://my.oschina.net/u/3563169/blog/1580135，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
官网：Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
2.1 简单使用
watch 属性（观察者）完成 Vue 对属性值修改时的监听。用于在完成页面和数据交互之前，对新数据进行判断和预处理。关键字：watch。具体使用如下：
html部分代码：
<body> <div id="app"> <input type="text" v-model="msg"> </div> </body>js部分代码：
<script> window.onload = function (){ new Vue({ el:"#app", data:{ msg:"watch 观察者" }, watch:{ //使用观察者监听 msg 变量 msg:function(newValue,oldValue){ console.log("新数据："+newValue+";旧数据："+oldValue); } } }); } </script>效果演示：
watch是一个对象，key值是需要监听的属性变量，value值是函数。watch 中的function 有两个参数，一个是 newValue(变化后的新数据)，一个是oldValue(变化前的新数据)。
2.2 分层监视
关键字：handler 数据变化时所调用的方法，deep 监视模式。
默认情况下只监听指定的属性是否发生变换（单层）。请看下段代码：
html 部分代码：
<body> <div id="app"> <input type="text" v-model="user.name"> <hr/> <input type="text" v-model="userDeep.name"> </div> </body>js 部分代码：
window.onload = function (){ new Vue({ el:"#app", data:{ user:{ name:"Alice", age:18 }, userDeep:{ name:"Tome", age:19 } }, watch:{ // 普通监听 user:function(newValue,oldValue){ console.log("调用普通监听") }, // 分层监听 userDeep:{ handler:function(newValue,oldValue){ console.log("调用了分层监听"); }, deep:true } } }); }在该代码中，data 中有两个对象变量 user 和 userDeep。在页面中第一个 input 框使用 v-model 双向绑定 user.name，第二个 input 框使用 v-model 双向绑定 userDeep.name。 这里对 user 采取普通监听，对 userDeep 采用分层监听。当改变第一个input框中数据（user.name），未执行监听函数打印“调用普通监听”；当改变第二个input框中数据（userDeep.name），执行监听函数并打印“调用分层监听”。如下图：
因为使用普通监听，只能监听当层变量变化。使用分层监听，可以监听当层及下层变量的变化。
本文发表于2017年11月27日 10:38
(c)注：本文转载自https://my.oschina.net/u/3563169/blog/1580135，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 2685 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |