深入理解Vue中的计算属性与监听属性

原创

Front_Yue

发布于 2025-01-12 21:57:40

9400

代码可运行

文章被收录于专栏：码艺坊码艺坊

运行总次数：0

代码可运行

前言

在Vue.js这个构建用户界面的渐进式框架中，计算属性（Computed Properties）和监听属性（Watch Properties）是处理数据和响应式更新的两个核心特性。它们为开发者提供了不同的方式来操作和响应数据的变化，正确理解和合理运用这两个概念对于开发高效、可维护的Vue应用具有不可忽视的重要性。

一、计算属性（Computed Properties）

计算属性是一种特殊的属性，它基于Vue实例中的其他响应式数据进行计算，并返回计算结果。它提供了一种简洁、优雅且高效的方式来处理和展示数据。

（一）定义与工作原理

计算属性通过computed选项来定义。在计算属性的函数内部，可以访问Vue实例中的其他数据属性。计算属性的值是由其依赖的响应式数据动态计算得出的。

export default {
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed: {
        fullName() {
            return `${this.firstName} ${this.lastName}`;
        }
    }
};

在这段代码中，fullName是一个计算属性。它依赖于firstName和lastName这两个数据属性。当firstName或者lastName的值发生改变时，Vue的响应式系统会自动检测到这种变化，并重新计算fullName的值。这种自动更新的机制是基于Vue的依赖追踪系统实现的。Vue会在组件初始化以及依赖的数据发生变化时，分析计算属性函数中用到的数据，并建立依赖关系。一旦依赖的数据发生变化，计算属性就会被标记为需要重新计算，然后在合适的时机重新执行计算函数，更新其值。

（二）使用场景

数据格式化
- 例如，将日期对象格式化为特定的字符串格式。
- 假设我们有一个date数据属性，存储着一个Date对象。我们可以创建一个计算属性formattedDate来将其格式化为YYYY - MM - DD的形式。

export default {
    data() {
        return {
            date: new Date()
        };
    },
    computed: {
        formattedDate() {
            const year = this.date.getFullYear();
            const month = ('0' + (this.date.getMonth() + 1)).slice(-2);
            const day = ('0' + this.date.getDate()).slice(-2);
            return `${year}-${month}-${day}`;
        }
    }
};

数据筛选与排序
- 在处理列表数据时，我们可能需要根据某些条件筛选出符合要求的项或者对列表进行排序。
- 比如，有一个products列表，我们可以创建一个计算属性filteredProducts来筛选出价格大于某个值的商品。

export default {
    data() {
        return {
            products: [
                { name: 'Product A', price: 10 },
                { name: 'Product B', price: 20 },
                { name: 'Product C', price: 30 }
            ],
            minPrice: 15
        };
    },
    computed: {
        filteredProducts() {
            return this.products.filter(product => product.price > this.minPrice);
           }
       }
 };

计算汇总数据
- 如计算购物车中商品的总价。如果我们有一个cart数组，其中每个商品对象都有price和quantity属性。

export default {
    data() {
        return {
            cart: [
                { price: 10, quantity: 2 },
                { price: 15, quantity: 1 }
            ]
        };
    },
    computed: {
            totalPrice() {
                return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
            }
        }
    }
};

（三）与其他属性的区别

与方法（Methods）的区别
- 方法是在每次调用时都会执行函数体。而计算属性是基于依赖缓存结果的。
- 例如，我们有一个计算属性doubleValue用于计算一个数的两倍，和一个方法doubleValueMethod做同样的事情。

export default {
    data() {
        return {
            num: 5
        };
    },
    computed: {
        doubleValue() {
            return this.num * 2;
        }
    },
    methods: {
        doubleValueMethod() {
            return this.num * 2;
        }
    }
};

如果在一个模板中多次使用{{ doubleValue }}，它只会计算一次（如果num没有变化），而每次使用{{ doubleValueMethod() }}都会执行方法函数。
与监听属性的区别
- 计算属性主要用于简单地根据现有数据计算出新数据用于展示或者作为其他计算的基础。而监听属性更多地是用于在数据变化时执行一些副作用，比如数据验证、发送网络请求等。

二、监听属性（Watch Properties）

监听属性允许开发者观察Vue实例中的数据变化，并在数据变化时执行自定义逻辑。

（一）定义与使用

监听属性可以通过watch选项或者$watch方法来定义。watch选项是在组件的选项中定义一个对象，对象的键就是要观察的数据属性，值是一个函数，当数据变化时这个函数就会被调用。

export default {
    data() {
        return {
            searchQuery: ''
        };
    },
    watch: {
        searchQuery(newVal, oldVal) {
            this.fetchSearchResults(newVal);
        }
    },
    methods: {
        fetchSearchResults(query) {
            // 假设这里发送一个网络请求，根据查询词获取搜索结果
            // 例如使用axios库
            /*
            axios.get('/search', { params: { query: query } })
               .then(response => {
                    // 处理搜索结果
                    this.searchResults = response.data;
                })
               .catch(error => {
                    console.error('搜索请求出错:', error);
                });
            */
        }
    }
};

在这个例子中，searchQuery是被监听的属性。每当searchQuery的值发生改变时，fetchSearchResults方法就会被调用，并且新值newVal和旧值oldVal会被传入方法中。这样就能够在用户输入搜索词发生变化时，及时地获取新的搜索结果。

（二）深度监听与选项

默认监听行为
- 默认情况下，监听属性只观察对象引用的变化。这意味着如果对象内部的属性发生了变化，但对象的引用没有改变，监听器不会被触发。
- 例如，我们有一个user对象：

export default {
    data() {
        return {
            user: {
                name: 'John',
                age: 30
            }
        };
    },
    watch: {
        user(newVal, oldVal) {
            console.log('User object changed:', newVal);
        }
    }
};

如果我们只是修改user.name为'Jane'，user对象的引用没有改变，所以这个监听器不会被触发。
深度监听
- 如果需要监听对象内部属性的变化，就需要设置deep选项为true。

export default {
    data() {
        return {
            user: {
                name: 'John',
                age: 30
            }
        };
    },
    watch: {
        user: {
            handler(newVal, oldVal) {
                console.log('User object changed:', newVal);
            },
            deep: true
        }
    }
};

当我们设置deep: true后，即使只是修改user对象内部的name或者age属性，监听器也会被触发。

（三）应用场景

数据验证
- 当用户输入表单数据时，我们可以使用监听属性来实时验证输入的合法性。
- 比如，有一个注册表单，其中有一个email字段，我们可以监听email的变化来验证它是否符合电子邮件格式。

export default {
    data() {
        return {
            email: ''
        };
    },
    watch: {
        email(newVal) {
            const emailRegex = /^[a - z0 - 9_. -]@[a - z0 - 9 -]+\.[a - z]{2,}$/i;
            if (!emailRegex.test(newVal)) {
                console.log('无效的电子邮件地址');
            }
        }
    }
};

异步操作
- 如前面提到的搜索功能，当搜索词发生变化时发送网络请求获取搜索结果。
DOM操作
- 在某些情况下，可能需要根据数据的变化来操作DOM。例如，当一个元素的显示状态由某个数据属性控制时，我们可以监听这个数据属性的变化并执行相应的DOM操作。

export default {
    data() {
        return {
            isVisible: false
        };
    },
    watch: {
        isVisible(newVal) {
            const element = document.getElementById('my - element');
            if (newVal) {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        }
    }
};

三、计算属性与监听属性的对比与应用

计算属性和监听属性虽然都能够响应数据的变化，但它们在多个方面存在差异，并且在不同的应用场景下各有优劣。

（一）优缺点对比

计算属性的优点
- 缓存机制：计算属性具有缓存特性，这使其在性能上有很大优势。如果计算属性依赖的数据没有发生变化，多次访问计算属性时会直接返回缓存的值，而不需要重新计算。这在处理复杂计算或者频繁访问的数据时非常有用。
- 简洁性：对于单纯基于其他数据计算出新数据的情况，计算属性的定义和使用非常简洁直观。它不需要额外设置监听逻辑，只需要在computed选项中定义一个函数即可。
计算属性的缺点
- 缺乏副作用操作：计算属性主要用于数据的计算和返回结果，不适合执行一些带有副作用的操作，如异步操作或者直接修改其他数据。
监听属性的优点
- 执行副作用：监听属性可以在数据变化时执行各种副作用操作，如异步请求、操作DOM或者修改其他非响应式数据等，这使得它在处理复杂的交互逻辑时非常有用。
- 对新旧值的访问：在监听函数中可以同时获取到数据变化前后的值（新值和旧值），这对于一些需要根据变化前后的差异进行处理的场景很有帮助。
监听属性的缺点
- 性能开销：如果没有合理使用，监听属性可能会导致不必要的函数调用，尤其是在监听大型对象或者频繁变化的数据时，可能会影响性能。

（二）实际案例分析

电商应用中的总价计算与搜索功能
- 在电商应用中，对于购物车总价的计算，使用计算属性是非常合适的。因为购物车中的商品数据和计算逻辑相对固定，只要商品的价格和数量不变，总价就不需要重新计算。
- 而对于搜索功能，当用户输入搜索词时，需要根据输入的词发送网络请求获取搜索结果，这种情况下使用监听属性更为恰当。因为搜索词的变化会触发一个异步的、与外部交互（网络请求）的操作。

四、结语

计算属性和监听属性是Vue.js中处理响应式数据的两种重要方式。计算属性适合于简单的数据展示和计算，能够利用缓存机制提高性能并且使代码简洁明了。监听属性适合于处理数据变化时的异步操作和复杂逻辑，能够在数据变化时执行各种副作用操作。深入理解这两个概念，并根据不同的应用场景合理选择和使用它们，将有助于我们构建更加高效和可维护的Vue应用。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript