什么是侦听属性
上节，我们已经了解了计算属性和方法的区别，其实在 Vue 中还有一种可以根据 Vue 实例的数据而实时变化的属性，即侦听属性。由于这种属性的好处，你可能会滥用它，导致代码的臃肿。某些时候可能使用计算属性更合适。
实例
侦听属性
代码-HTML
<div id='app2'> {{ info }} </div> 复制代码
代码-JS
<script> var app2 = new Vue({ el: "#app2", data: { msg1: "hello", msg2: "phyger", info: "hello phyger" }, watch:{ msg1: function(){ this.info = this.msg1 + ' ' + this.msg2 }, msg2: function(){ this.info = this.msg1 + ' ' + this.msg2 } } }) </script> 复制代码
页面效果
网络异常，图片无法展示
|
过程分析
如上，你会发现使用侦听属性在处理字符拼接的时候，定义了两个侦听属性，但是如果选择计算属性，则会简单甚多。
计算属性
代码-HTML
<div id='app2'> {{ infoc }} </div> 复制代码
代码-JS
<script> var app2 = new Vue({ el: "#app2", data: { msg1: "hello", msg2: "phyger", info: "hello phyger" }, watch:{ msg1: function(){ this.info = this.msg1 + ' ' + this.msg2 }, msg2: function(){ this.info = this.msg1 + ' ' + this.msg2 } }, computed: { infoc: function(){ return this.msg1+' '+this.msg2 } } }) </script> 复制代码
页面效果
网络异常，图片无法展示
|
总结
侦听属性是针对单个属性的监听，即需要监听几个属性，就得写几个侦听方法；而计算属性可以以表达式的方式出现，即可以监控多个属性。侦听属性精确单一，计算属性一次到位。
关于侦听属性和计算属性的区别，你学废了吗？
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
