vue中的Computed、Methods、Watch

目录

?

一、三者的定义

二、区别?

三、代码示例

?

---

?

一、三者的定义

Computed：是Vue.js中的一个计算属性，它可以根据依赖的数据动态计算得出一个新的值。计算属性会进行缓存，只有当依赖的数据发生改变时，才会重新计算。

Methods：是Vue.js中定义方法的选项，它可以用来定义Vue实例上的方法。在模板中通过调用方法名来使用这些方法。

Watch：是Vue.js中的一个观察属性，它可以监听指定的数据变化，并在数据发生改变时执行相应的函数。Watch可以用来执行异步操作或者在特定数据变化时执行一些逻辑。

二、区别?

区别：

1. Computed是一个计算属性，而Methods和Watch都是方法。
2. Computed用于根据依赖的数据动态计算得出一个新的值，并且会进行缓存，只有在依赖的数据发生改变时才会重新计算。而Methods可以用来定义任意的方法，不涉及数据的计算和缓存。
3. Watch用于监听指定的数据变化，并在数据发生改变时执行相应的函数。它适用于需要在特定数据变化时执行一些逻辑或者执行异步操作的场景。而Computed和Methods不具有数据监听的功能。

三、代码示例

1. Computed:

<template>
  <div>
    <p>Product: {{ product }}</p>
    <p>Discounted Price: {{ discountedPrice }}</p>
  </div>
</template>

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

在上面的示例中，我们定义了一个计算属性的computed，分别计算了产品名称和折扣后的价格。在模板中，我们直接使用这些计算属性来显示数据。

1. Methods:

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

在上面的示例中，我们定义了一个方法incrementCounter，用于将计数器递增。在模板中，我们使用@click指令将方法与按钮的点击事件关联起来。

1. Watch:

<template>
  <div>
    <p>Username: {{ username }}</p>
    <p>Username Length: {{ usernameLength }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  },
  watch: {
    username(newUsername) {
      this.usernameLength = newUsername.length;
    }
  }
};
</script>

在上面的示例中，我们定义了一个watcher，用于观察username属性的变化。当username发生变化时，watcher会调用相应的处理函数，更新usernameLength的值。这样可以实时监测username的长度变化，并在模板中显示出来。

?