Vue-8- 计算属性和侦听属性

2022 年 6 月 13 日
本文字数：938 字
阅读完需：约 3 分钟

什么是侦听属性

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

复制代码

页面效果

总结

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

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

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/85d32279c44c5605d35681e28】。文章转载请联系作者。

Python研究所

关注

公众号:Python研究所 2018.10.14 加入

云原生领域技术分享。

发布

暂无评论

创作场景

Vue-8- 计算属性和侦听属性

什么是侦听属性

实例

侦听属性

代码-HTML

代码-JS

页面效果

过程分析

计算属性

代码-HTML

代码-JS

页面效果

总结

Python研究所

评论