侦听器:顾名思义,就是用来监听数据变化用的。侦听器在vue实例中,定义变量watch来使用。监听新值newVal和旧值oldVal,具体使用方法如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue侦听器与计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> </style> </head> <body> <div class="myApp"> <p>{{msg}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { msg:'hello vue!' }, watch: { msg: function (newVal, oldVal) { console.log('oldVal=' + oldVal); console.log('newVal=' + newVal); } } }); </script> </body> </html>
上面是一个简单的示例,watch监听的是变化的数据,可以监听新数据和老数据,我们可以使用Chrome的控制台来修改msg的值进行一下测试:
如果只是监测一个变量值的变化,推荐使用watch,官网上还有一个复杂一些的例子,感兴趣的同学,可以去看看https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8,如果要监测两个以上变量的情况,最好还是使用计算属性computed,为什么这么说呢,我们可以看一下下面的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue侦听器与计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> </style> </head> <body> <div class="myApp"> <p>firstName:{{firstName}}</p> <p>lastName:{{lastName}}</p> <p>fullName:{{fullName}}</p> <p>xing:{{xing}}</p> <p>ming:{{ming}}</p> <p>quanming:{{quanming}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar', xing: 'zhang', ming: 'san', }, watch: { firstName: function(val) { this.fullName = val + ' ' + this.lastName }, lastName: function(val) { this.fullName = this.firstName + ' ' + val } }, computed: { quanming: function(){ return this.xing + ' ' + this.ming; } } }); </script> </body> </html>
从上面的例子,我们可以看出,同样的功能,使用computed要比watch更简洁。
上一篇文章说到,在数据绑定双花括号中,我们可以使用表达式,但是,有些复杂的表达式,如果用到的地方比较多,那其实是不太方便的,这时候,就可以使用computed了,示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue侦听器与计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> </style> </head> <body> <div class="myApp"> <p>Original message: "{{ msg }}"</p> <p>Computed reversed message: "{{ reversedMsg }}"</p> <p>Reversed message: "{{ reversedMsg1() }}"</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { msg: 'hello vue' }, computed: { reversedMsg: function() { return this.msg.split('').reverse().join('') } }, methods: { reversedMsg1: function() { return this.msg.split('').reverse().join('') } } }); </script> </body> </html>
仔细看上面的例子中,反转字符串我使用了两种方法,一个是使用computed,另一个是在表达式中调用方法来实现,这两个方法有什么区别呢?其实,使用computed,是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
computed计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue侦听器与计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> </style> </head> <body> <div class="myApp"> <p>firstName:{{firstName}}</p> <p>lastName:{{lastName}}</p> <p>fullName:{{fullName}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { firstName: 'john', lastName: 'doe' }, computed: { fullName:{ get: function(){ return this.firstName + ' ' + this.lastName; }, set: function(newVal){ var names = newVal.split(' '); this.firstName = names[0]; this.lastName = names[names.length -1]; } } } }); </script> </body> </html>
在Chrome的控制台,输入myApp.fullName = 'zhang san',就可以看到页面上的名字被重新设置了。