Vue之计算属性、方法、侦听

Vue的计算属性、方法、侦听

三种方法进行数据的计算：

1、计算属性（推荐）
computed属性下去计算值
优点：可以设置缓存，会自动监听涉及的变量值是否改变，如果涉及的变量值没有改变，则不会重新执行（age改变，computed下的fullName不会重新执行）

2、计算方法
写在methods方法下
缺点：不会设置缓存，无论涉及的值是否改变，只要页面刷新都会重新执行（age改变，methods下的fullName也会重新执行）

3、侦听方式
写在watch下（age改变，watch下的fullName不会重新执行）
优点：会设置缓存，如果监听的变量值没有改变，则不会执行
缺点：跟计算属性相比，代码会显得冗余

<div id="app4">{{fullName}}</div>
<script>
        var app4 = new Vue({
            el: '#app4',
            data: {
                firstName: 'Dell',
                lastName: 'Lee',
                age: 28
                fullName: 'Dell Lee',
            },
            // 3、侦听
            watch: {
                firstName: function(){
                    this.fullName = this.firstName + ' ' + this.lastName;
                },
                lastName: function(){
                    this.fullName = this.   firstName + ' ' + this.lastName;
                }
            }
            ///2、方法，html中写为fullName()
            // methods: {
            //     fullName: function () {
            //         return this.firstName + ' ' + this.lastName;
            //     }
            // }
            // 1、属性
            // computed: {
            //     fullName: function(){
            //         return this.firstName + ' ' + this.lastName;
            //     }
            // }
        })  
</script>