Vue 2.5从零开始学习 — Vue 计算属性与监听器

Vue 计算属性与监听器

在开发过程中，我们可能会遇到这样的需求：

• 当你有两个或更多的数据，你并不希望把他们全部罗列显示出来，那样代码看起来很冗长。
• 而是需要经过一些计算、处理最后整合成为一个完整的数据结果，并且当组成因子的数据值改变时，它也可以随之动态变化。

下面我们看一个例子：

        姓：
        

        名：
        
 
    

在 #show div元素中，我想要显示此人的全名，也就是包含他的姓和名。

那么这样好吗？

 {{ firstName }} {{ LastName }} 

• 就像上面提到的，我不希望只是单纯的通过文字的罗列来实现，而是通过数据的整合。

• 可想而知，全名至少需要一步字符串的连接操作。

• 使用 data 和 method 属性可能会写得很复杂，所以在此处我们引入一个新的知识点：计算属性

计算属性

    
    
    


    

        姓：
        

        名：
        
{{ fullname }}
    

    

• 在此处需要注意的是计算属性中的数据 fullname 也仍是 Vue 实例对象的成员变量，和 firstName、LastName 是同等地位哦！
• computed：如果计算因子没有发生变化，则计算属性对象的值是最后一次的缓存结果，而不是重新计算。

监听器

如果我们想设置一个计数器，每次我们的 input 标签有内容输入，发生改变时，就计数 +1 ：...

        姓：
        

        名：
        
{{ fullname }}
        

            Count：{{ cnt }}    
        

• 监听器指的是去侦测某个数据，一旦它发生变化，监听器将立刻反应，程序员则可以在此时写入业务逻辑。
• Vue 实例对象中的 watch 属性即是监听器。