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

墨蓝 2023-07-06 10:25 10阅读 0赞

## 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>