Vue计算属性vs监听器：基本使用与原理分析

CreatorRay

已于 2023-08-25 11:01:17 修改

阅读量385

点赞数

分类专栏： vue 前端面试文章标签： vue.js 前端 javascript

于 2023-08-17 22:16:42 首次发布

本文链接：https://blog.csdn.net/m0_46171043/article/details/132352020

版权

前端同时被 3 个专栏收录

268 篇文章 24 订阅

订阅专栏

面试

170 篇文章 3 订阅

订阅专栏

vue

72 篇文章 11 订阅

订阅专栏

在Vue中，计算属性（Computed Properties）和监听器（Watchers）是两种强大的工具，用于处理数据逻辑和响应式变化。虽然它们在某些情况下可以实现类似的功能，但它们的设计和用法有所不同。本文将深入探讨Vue计算属性与监听器的区别、实现原理以及最佳用例。

公众号：Code程序人生，个人网站：https://creatorblog.cn

计算属性

计算属性是一种用于在Vue实例中进行数据计算的便捷方式。它的核心思想是将计算逻辑封装成属性，让这些属性的值随着依赖的数据变化而自动更新。计算属性适用于需要基于多个数据属性进行复杂计算的场景，比如价格计算、字符串拼接等。

基本使用

<template>
  <div>
    <p>原始价格: {{ price }}</p>
    <p>折扣后价格: {{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.2
    };
  },
  computed: {
    discountedPrice() {
      return this.price * (1 - this.discount);
    }
  }
};
</script>

在上面的示例中，计算属性discountedPrice基于price和discount进行计算，当price或discount发生变化时，discountedPrice会自动重新计算。

实现原理

计算属性的实现原理基于Vue的响应式系统。当计算属性被访问时，Vue会建立一个依赖关系，将计算属性与其依赖的数据属性关联起来。

当任何一个依赖属性发生变化时，Vue会通知计算属性进行重新计算，然后将结果缓存起来，以便下次访问时直接返回缓存值。这种机制可以避免重复计算，提高性能。

监听器

监听器是一种更加灵活的方式，用于在数据变化时执行自定义的操作。与计算属性不同，监听器不会自动计算属性值，而是允许你执行任意的副作用操作，比如异步请求、数据更新等。

基本使用

<template>
  <div>
    <p>当前值: {{ value }}</p>
    <button @click="increaseValue">增加值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  },
  methods: {
    increaseValue() {
      this.value++;
    }
  },
  watch: {
    value(newVal, oldVal) {
      console.log(`值从 ${oldVal} 变为 ${newVal}`);
      // 在这里执行其他操作，如发送请求或更新其他数据
    }
  }
};
</script>