十四、Vue详解计算属性与侦听器

Vue提供了非常舍便利的表达式计算，在模板中进行过多的表达式计算是一个糟糕的写法，只会让代码越来越难以维护。当需要使用到复杂的计算才能得到结果时，Vue提供了计算属性，而且推荐用它。

下面来看一个糟糕的案例，下面的案例中只进行了一个计算，加入需要数十个甚至更多呢？了解了这个之后再来看看计算属性实现。

<div id="example">
  {{ msg.split('').reverse().join('') }}
</div>

使用计算属性与方法实现同一个结果

<div id="app">
    <!--最普通的实现-->
    {{webName}}{{webUrl}}
    <!--计算属性-->
    {{ fullWebNameAndUrl }}
    <!--方法-->
    {{ fullWebName() }} - {{desc}}
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            webName:"自如初",
            webUrl:"https://www.ziruchu.com",
            desc:"一个记录学习的博客"
        },
        // 方法一：计算属性实现
        computed:{
            fullWebNameAndUrl:function () {
                console.log('我是计算属性，我执行了一次');
                return this.webName + " " + this.webUrl;
            }
        },
        // 方法二：方法实现
        methods:{
            fullWebName:function(){
                console.log('我是方法，我执行了一次');
                return this.webName + " " + this.webUrl;
            }
        }
    });
</script>

需求：实现网站名与链接在一行输出

1）使用{{}}语法对数据一个一个进行绑定，如果需要计算更复杂的逻辑呢？在此例中显然没法完成；

2）使用计算属性实现：定义一个计算属性，在该属性中进行更种运算。在此案例中，定义了一个fullWebNameAndUrl计算属性，在该计算属性内，对数据进行拼接从而实现它们在一行输出；

3）使用方法实现：同样是对数据进行拼接从而实现了对它们在一行输出，不同的是，使用方法实现时，调用时要加上括号，如fullWebName()

4）浏览器控制台中修改webName的值，app.webName='小白'，可以看到计算属性和方法都计算了一次，再次执行app.webName='小白'这次看到计算属性和方法都没有进行计算。重点来了，执行app.desc='php博客'时，方法执行了一次计算，而计算没有属性没有执行计算，原因在于计算属性有一个缓存机制，只有其依赖的值发生了变化才会进行重新计算。

使用监听器

<div id="app">
  {{fullName}}
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            webName:"自如初",
            webUrl:"https://www.ziruchu.com",
            desc:"一个记录学习的博客",
            fullName:"自如初 一个记录学习的博客"
        },
        watch:{
            webName:function(){
                console.log('我专门用于监听webName是否发生变化')
                this.fullName = this.webName + " " + this.webUrl;
            },
            webUrl: function(){
                console.log('我专门监听webUrl是否发生变化')
                this.fullName = this.webName + " " + this.webUrl;
            }
        }
    });
</script>

用途：当fullName所依赖的webName与webUrl发生变化时都重新计算。

<div id="app">
  {{fullName}}
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            webName:"自如初",
            webUrl:"https://www.ziruchu.com",
            desc:"一个记录学习的博客",
            fullName:"自如初 一个记录学习的博客"
        },
        watch:{
            webName:function(){
                console.log('12312')
                this.fullName = this.webName + " " + this.webUrl;
            },
            webUrl: function(){
                console.log(1223)
                this.fullName = this.webName + " " + this.webUrl;
            }
        }
    });
</script>

总结：对于使用计算属性、方法与侦听器可以得到同一个结果或者需求者，最好是使用计算属性来实现。尽管侦听器同样也有缓存，但是代码对比下来，计算属性更加简洁。