数据变化时执行异步或开销较大的操作。 下面这个例子我们就可以使用侦听器来完成，很简单，就是名和姓的输入框的值发生改变的时候，全名也会发生变化。 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div> <span>名：</span> <span> <input type="text" v-model='firstName'> </span> </div> <div> <span>姓：</span> <span> <input type="text" v-model='lastName'> </span> </div> <div>{{fullName}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 侦听器 */ var vm = new Vue({ el: '#app', data: { firstName: 'Jim', lastName: 'Green', fullName: 'Jim Green' }, watch:{ // 此处的val就是firstName的最新值 firstName: function (val) { this.fullName = val + " " + this.lastName; }, lastName: function (val) { this.fullName = this.firstName+ " " + val; } } }); </script> </body> </html>需要注意的点是：
watch 中的属性一定是data 中 已经存在的数据;watch 中的属性不能自定义，要和监听的属性名称一致；上面的这个例子如果我们使用computed计算属性来做的话会更简单，如下 ：
computed: { fullName: function(){ return this.firstName + ' ' + this.lastName; } }侦听器处理一些特有的场景，如异步的操作，会更加简洁高效。如下面这个例子：
案例：验证用户名是否可用 需求分析：
① 通过v-model实现数据绑定； ② 需要提供提示信息； ③ 需要侦听器监听输入信息的变化； ④ 需要修改触发的事件；
具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div> <span>用户名：</span> <span> <input type="text" v-model.lazy='uname'> </span> <span>{{tip}}</span> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 侦听器 1、采用侦听器监听用户名的变化 2、调用后台接口进行验证 3、根据验证的结果调整提示信息 */ var vm = new Vue({ el: '#app', data: { uname: '', tip: '' }, methods: { checkName:function (uname) { // 调用接口，可以使用定时任务的方式来模拟接口调用 var that = this; setTimeout(function () { // 模拟接口调用 if (uname == "admin") { that.tip ="用户名已经存在，请更换" } else { that.tip ="用户名可以使用" } },2000) } }, watch: { uname:function (val) { // 调用后台接口验证用户名的合法性，为了代码更加简洁，我们可以单独封装一个方法 this.checkName(val); // 正在验证 this.tip ="正在验证..."; } } }); </script> </body> </html>效果如下：
