Vue 计算属性computed和监听属性watch比较

Z时代
2024-01-10
分类：综合

vue

1、计算属性

介绍：

避免在模板中使用冗余代码处理data中的数据

当依赖的data对象中的属性值发生变化时，将会触发计算方法，在data对象中生成新的变量，并且会将新的变量缓存起来；（只要依赖的data对象属性值不发生改变，将不会触发计算方法；）

可以用计算属性实现的，也就可以用方法methods实现，但是methods性能不如computed高；因为methods每次渲染后都会被调用，而computed只要响应式依赖(data中的属性)没有发生改变，将不会重新计算，并且计算后会重新被缓存；

同样，可以用计算属性实现的，也就可以用侦听器watch实现，只要所依赖的相应数据不是频繁变化，开销不大的时候，就是用计算属性，反之用监听器；

计算属性不需要再data中进行定义；

使用：

（1）、监听firstName和lastName计算fullName

<template>
    <div>{{fullName}}</div>
</template>
<script>
    export default {
        data() {
            return { 
             firstName: "wang",
             lastName: "wu"
            }
        },
        computed: {
            fullName: function () { // 监听data中的firstName和lastName值的变化, 得到新变量fullName，且fullName不需要再data中定义
                return this.firstName + "-" + this.lastName;
            }
        }
    }
</script>

（2）、使用setter和getter方法

<template>
    <div>firstName: {{firstName}}</div>
    <div>lastName: {{lastName}}</div>
    <div>{{fullName}}</div>
    <a @click="changeValue">更改</a>
</template>
<script>
    export default {
        data() {
            return {
            firstName: "wang",
            lastName: "wu"
    }
        },
        computed: {
            fullName: { // 监听data中的firstName和lastName, 得到新变量fullName
               get: function() {
                    return this.firstName + "-" + this.lastName;
                } ,
                // set方法作用：通过参数修改计算的依赖属性firstName和lastName值
                set: function(newValue) { 
                    this.firstName = newValue[0];
                    this.lastName = newValue[newValue.length-1];
                }
            }
        },
        methods:  {
            changeValue() {
                // 调用计算属性的set方法，修改firstName和lastName
                this.fullName="yyyyy";
            }
        }
    }
</script>

2、侦听器

介绍：

用于侦听变化较为频繁，开销较大的数据；

监听的变量需要在data中进行定义；

使用：

<template>
    <input type="text" v-model="question" />
</template>
<script>
    export default {
        data() {
            return {
            question: "",
            answer: ""
    }
        },
       watch: {
           question: function () { // 监听question值的变化, 只要question发生变化，这个函数将会被执行；
                this.answer="---------------------";
                this.getAnswer();
            }
        },
        methods: function() {
            getAnswer() {
                console.log("question属性值发生变化了。。。");
            }
        }
    }
</script>