vue2 中 computed 计算属性 和 watch 监听属性的区别

vue2 中 computed 计算属性 和 watch 监听属性的区别

1. 定义和语法

• computed计算属性: 是一个对象，其中的每个属性都是一个函数，通过返回值来定义一个新的属性。它可以像普通数据属性一样在模板中使用。

<template>
  <div>
    <p>{
   
    
    {
   
    
     fullName }}</p>
  </div>
</template>

<script>
export default {
   
    
    
  data() {
   
    
    
    return {
   
    
    
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
   
    
    
    fullName() {
   
    
    
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

• watch监听属性: 也是一个对象，其中的每个属性名对应要监听的数据属性，值可以是一个函数或包含 handler 和其他配置项的对象。

<template>
  <div>
    <input v-model="message">
    <p>{
   
    
    {
   
    
     reversedMessage }}</p>
  </div>
</template>

<script>
export default {
   
    
    
  data() {
   
    
    
    return {
   
    
    
      message: 'Hello',
      reversedMessage: ''
    };
  },
  watch: {
   
    
    
    message(newVal) {
   
    
    
      this.reversedMessage = newVal.split('').reverse().join('');
    }
  }
};
</script>

2. 使用场景

• computed计算属性: 适用于需要根据现有的数据计算得出新的数据，并且这个计算过程有一定的复杂度。它会缓存计算结果，只有当依赖的数据发生变化时才会重新计算。常用于数据的格式化、拼接、过滤等操作。

<template>
  <div>
    <ul>
      <li v-for="product in inStockProducts" :key="product.id">{
   
    
    {
   
    
     product.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
   
    
    
  data() {
   
    
    
    return {
   
    
    
      products: [
        {
   
    
     id: 1, name: 'Apple', stock: 10 },
        {
   
    
     id: 2,