Vue 计算属性与监听器

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

当你有两个或更多的数据，你并不希望把他们全部罗列显示出来，那样代码看起来很冗长。

而是需要经过一些计算、处理最后整合成为一个完整的数据结果，并且当组成因子的数据值改变时，它也可以随之动态变化。

下面我们看一个例子：

<div id="root">
        姓：<input v-model="firstName"/>
        <br>
        名：<input v-model="LastName"/>
        <div id='show'> </div>
    </div>

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

那么这样好吗？

<div id='show'> {{ firstName }} {{ LastName }} </div>

就像上面提到的，我不希望只是单纯的通过文字的罗列来实现，而是通过数据的整合。
可想而知，全名至少需要一步字符串的连接操作。
使用 data 和 method 属性可能会写得很复杂，所以在此处我们引入一个新的知识点：计算属性

计算属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title> 计算属性与监听器 </title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input v-model="firstName"/>
        <br>
        名：<input v-model="LastName"/>
        <div>{{ fullname }}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                LastName: ''
            },
            computed: {
                fullname: function (){
                    return this.firstName + ' ' + this.LastName
                }
            }
        })
    </script>

</body>
</html>

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

监听器

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

<div id="root">
        姓：<input v-model="firstName"/>
        <br>
        名：<input v-model="LastName"/>
        <div>{{ fullname }}</div>
        <div>
            Count：{{ cnt }}    
        </div>
</div>

<script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                LastName: '',
                cnt: 0
            },
            computed: {
                fullname: function (){
                    return this.firstName + ' ' + this.LastName
                }
            },
            watch: {
                fullname: function (){
                    this.count ++
                }
            }
        })
</script>