什么是侦听属性

上节，我们已经了解了计算属性和方法的区别，其实在 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>

页面效果

总结

侦听属性是针对单个属性的监听，即需要监听几个属性，就得写几个侦听方法；而计算属性可以以表达式的方式出现，即可以监控多个属性。侦听属性精确单一，计算属性一次到位。

关于侦听属性和计算属性的区别，你学废了吗？

以上就是今天的全部内容了，感谢您的阅读，我们下节再会。