watchを使って非同期にデータを変更
watchを使う利点
①リアルタイムなデータの更新: watchを使用すると、データの変更をリアルタイムに監視できる。
②非同期な処理: watchコールバック関数内で非同期な処理を実行することができる。
③複数のデータの監視: watchオプションを使用すると、複数のデータを監視することができます。コード内の他のデータが変更された場合にも、対応するwatchコールバック関数が実行できる。
以下コード例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
<!--テンプレート構文-->
<div id="app1">
<p>{{counter}}</p>
<button @click="counter += 1" >+1</button>
<p>{{lessThanThree}}</p>
</div>
<script>
new Vue({
el:'#app1',
data:{
counter:0,
},
computed:{
lessThanThree:function(){
return this.counter > 3 ? '3より上' : '３以下'
}
},
watch:{
counter:function(){
var vm = this;
setTimeout(function(){
vm.counter = 0;
},3000);
}
}
})
</script>
</body>
</html>