Vue3：掌握计算属性和侦听器，提升数据响应能力！

2023-05-23 06:48:09

计算属性和侦听器：Vue 3 中处理响应式数据的强大工具

在构建动态交互式应用程序时，管理响应式数据至关重要。Vue 3 提供了两种强大的工具——计算属性和侦听器——来有效处理响应式数据，优化应用程序的性能和响应能力。

计算属性：从响应式数据中创建响应式数据

计算属性本质上是函数，根据其他响应式数据的组合进行计算，在这些响应式数据发生变化时自动更新和重新计算。计算属性有两个定义方法：

箭头函数语法：

computed: {
  fullName: () => {
    return this.firstName + ' ' + this.lastName;
  }
}

常规函数语法：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

在示例中，fullName 计算属性基于 firstName 和 lastName 响应式数据计算全名。

侦听器：监视响应式数据的变化并作出反应

侦听器允许您监视响应式数据的变化，并在发生变化时执行特定操作。它们也有两种定义方法：

箭头函数语法：

watch: {
  count: (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

常规函数语法：

watch: {
  count: function(newValue, oldValue) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

在示例中，count 侦听器监视 count 响应式数据，并在其值发生变化时记录新值和旧值。

代码示例：计算属性和侦听器实战

<template>
  <div>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <p>Full name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    firstName: function(newValue, oldValue) {
      console.log(`First name changed from ${oldValue} to ${newValue}`);
    },
    lastName: function(newValue, oldValue) {
      console.log(`Last name changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>