Vue----計算されたプロパティ

---

1計算されたプロパティ

計算されたプロパティは本質的に関数であり、データの変更をリアルタイムで監視し、DOMのレンダリング時に使用するコンポーネントの新しい計算値を返すことができます。

2計算されたプロパティを宣言します

計算されたプロパティは、コンポーネントの計算されたオプションで関数として宣言する必要があります。

注：
計算されたプロパティは計算結果の取得に重点を置いているため、計算されたプロパティには戻り値が必要です。

計算されたプロパティを使用する場合は、関数名を直接使用してください。

<template>
  <div>
    <input type="text" v-model.number="count" />
    <p>{
   
   { count }} 乘以 2 的值为：{
   
   { plus }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCounter',
  data() {
      
      
    return {
      
      
      count: 1,
    }
  },
  computed: {
      
      
    plus() {
      
      
      console.log('计算属性被执行了')
      return this.count * 2
    },
  }
}
</script>

<style></style>

3計算されたプロパティの使用に関する注意

①計算されたプロパティは計算されたノードで定義されている必要があります
②計算されたプロパティは関数関数である必要があります
③計算されたプロパティは戻り値を持っている必要があります
④計算されたプロパティは通常のプロパティとして使用される必要があります

4計算されたプロパティとメソッド

メソッドと比較すると、計算されたプロパティは計算結果をキャッシュし、計算されたプロパティの依存関係が変更された場合にのみ計算を再実行します。

メソッドは、メソッドが呼び出されるたびにメソッドを実行します。

計算プロパティが依存するデータ項目が変更されない限り、計算プロパティは1回だけ実行され、メソッドは複数回呼び出され、複数回実行されます。

<template>
  <div>
    <input type="text" v-model.number="count" />
    <p>{
   
   { count }} 乘以 2 的值为：{
   
   { plus }}</p>
    <p>{
   
   { count }} 乘以 2 的值为：{
   
   { plus }}</p>
    <p>{
   
   { count }} 乘以 2 的值为：{
   
   { plus }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCounter',
  data() {
      
      
    return {
      
      
      count: 1,
    }
  },
  computed: {
      
      
    plus() {
      
      
      console.log('计算属性被执行了')
      return this.count * 2
    },
  },
  methods: {
      
      
    // plus() {
      
      
    //   console.log('方法被执行了')
    //   return this.count * 2
    // }
  }
}
</script>

<style></style>