Vue の計算プロパティとプロパティリスニングについての簡単な説明

 計算: {
     「計算されたプロパティ名」() {
         「値」を返す
     }
 }

<テンプレート>
  <div>
    <p>{{ 数値 }}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      10,
      20歳
    }
  },
  // 計算されたプロパティ:
  // シナリオ: 変数の値を別の変数を使用して計算する必要がある/*
    文法：
    計算: {
      計算されたプロパティ名() {
        戻り値}
    }
  */
 // 注: 計算属性とデータ属性はどちらも変数であるため、同じ名前を持つことはできません // 注 2: 関数内で変数が変更された場合、結果は自動的に再計算され、計算結果が返されます: {
    数値(){
      this.a + this.b を返す
    }
  }
}
</スクリプト>

<スタイル>

</スタイル>

 得る（）{
                console.log('get が呼び出されました')
                // console.log(this) // this は vm (Vue インスタンス) です
                this.firstName + '-' + this.lastName を返します
            },
            

  ...
  計算:{
      フルネーム：
          //get の機能は何ですか?誰かが fullName を読み取ると、get が呼び出され、戻り値が fullName の値として使用されます。//get はいつ呼び出されますか? 1. fullName が初めて読み取られるとき。 2. 依存するデータが変更された場合。
          得る（）{
              console.log('get が呼び出されました')
              // console.log(this) // これはvmです
              this.firstName + '-' + this.lastName を返します
          },
          //set はいつ呼び出されますか? fullName が変更されたとき。
          設定(値){
              console.log('set',値)
              定数 arr = value.split('-')
              this.firstName = arr[0]
              this.lastName = arr[1]
          }
      }
  }
})    

<!-- イベントをバインドする場合: @xxx="yyy" yyy はいくつかの簡単なステートメントを記述できます -->
<button @click="isHot = !isHot">天気を切り替える</button>

      ...
      // 記述方法 1. ishot 属性をリッスンするためのウォッチ構成を渡します。watch:{
          ホット:{
              immediate:true、//初期化中にハンドラを呼び出す //ハンドラはいつ呼び出されますか? isHot が変化するとき。
              
              ハンドラー(新しい値、古い値){
                  console.log('isHot が変更されました', newValue, oldValue)
              }
          }
      }
  })
  
  
  // 方法 2. vm.$watch('isHot',{ を介して監視する
   immediate:true, //初期化中にハンドラを呼び出す。デフォルトは false
   // ハンドラはいつ呼び出されますか? isHot が変化するとき。
   handler(newValue,oldValue){ // パラメータは2つあり、1つは新しい値、もう1つは古い値です。 console.log('isHot が変更されました',newValue,oldValue)
   }
})

データ：{
	isHot:true、
	数字:
		a:1、
		1:1 1:1
	}
},
時計：{
	// マルチレベル構造内の特定の属性の変更を監視します (元の記述方法では引用符を追加する必要があり、省略形は省略できますが、この場合は追加する必要があります。そうしないとエラーが報告されます)
	/* '数値.a': {
		ハンドラ（）{
			console.log('a が変更されました')
		}
	} */
	// マルチレベル構造番号内のすべての属性の変更を監視します:{
		deep:true, // これが有効になっていない場合、監視は数値のアドレスが変更されたかどうかになります handler(){
			console.log('数値が変更されました')
		}
	}
}

時計：{
	isHot(新しい値、古い値){
		console.log('isHot が変更されました',newValue,oldValue,this)
	}
}

/* vm.$watch('isHot',関数(newValue,oldValue) {
	console.log('isHot が変更されました',newValue,oldValue,this)
}) */

時計：{
	firstName(値){
		タイムアウトを設定します(()=>{
			console.log(this) //vueインスタンスオブジェクト。通常の関数が使用されると、Windowが返されます。
			this.fullName = val + '-' + this.lastName
		},1000);
	},
	姓(val){
		this.fullName = this.firstName + '-' + val
	}
}