Vue的计算属性，方法和监听器-一一网

这是我参与更文挑战的第11天，活动详情查看：更文挑战

1.计算属性

当要相加两个数据时，可能通常会想到要用插值表达式来实现

比如要显示一个数据的组合

<div id="app">
    {{boy+" "+girl}}
</div>
复制代码

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
        }
    })
</script>
复制代码

页面上显示的就是

但是这样会很麻烦，所以在Vue中有一个东西叫计算属性，上代码

在下面的代码中我们引入了计算属性computed 为了方便后面理解我们在计算属性中console.log一个信息“计算了一次”

<div id="app">
    {{boy+" "+girl}}
    <!-- 使用了计算属性 -->
    {{boygirl}}
</div>
复制代码

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
            age:21
        },
        computed:{
            boygirl: function(){
                console.log("计算了一次");
                return this.boy + " " + this.girl;
            }
        }
    })
</script>           
复制代码

计算属性非常重要的一点是内置缓存，机制是当计算属性（boygirl）依赖的属性（boy和girl）不发生变化时，就不会发生变化，会一直使用上一次计算的结果，这样会提高性能，也就是说当你修改变量重新渲染页面时，只要上面代码中的boy和girl没有发生改变，则计算就不会被执行,例子如下，当改变age的时候，页面重新渲染，但是计算属性并没有被触发，只有在改变计算属性依赖的boy属性时计算属性被触发并输出了”计算了一次“

2.方法

用方法实现上面的效果

<div id="app">
    {{boy+" "+girl}}
    <!-- 使用了计算属性 -->
    {{boygirl()}}

</div>
复制代码

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
            age:21
        },
        methods:{
            boygirl:function(){
                return this.boy + " " +this.girl;
            }
        }
    })
</script>
复制代码

这样实现的效果是相同，但是有一个问题是方法是没有缓存的，当重新渲染页面的时候，方法也会再次执行。所以当可以用计算属性完成时优先选择计算属性，因为效率更高

3.监听器

只有设置过侦听的属性发生变化的时候，才会触发计算，和computed计算属性很像，也是有一个缓存在里面，只不过computed计算属性是依赖的变量（也就是计算需要用到的变量）发生变化时计算，而监听器是监听的变量发生变化时计算。

<div id="app">
    {{boy+" "+girl}}
    <!-- 使用了计算属性 -->
    {{boygirl+age}}

</div>
复制代码

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
            boygirl:"an quan",
            age:21
        },
        watch: {
            boy: function(){
                console.log("boy计算了一次");
                this.boygirl = this.boy + "" +this.girl;
            },
            girl: function(){
                console.log("girl计算了一次");
                this.boygirl = this.boy + "" +this.girl;
            },
        }	
    })
</script>
复制代码