Vue.jsのリアクティブシステムについて

Vueインスタンス

• 二つ作れる
• けど、なるべく引く数のインスタンスは使わない方がいい(分かりにくくなるから）

後から追加したプロパティはリアクティブにはならない

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app1">
<p>{{message}}</p>
<p>{{name}}</p>
<button @click="message = 'ボタンから変更'">ボタン</button>
</div>

main.js

var vm = new Vue({
	el:'#app1',
  data:{
		message:'メッセージ1'
	}
})

vm.message = '変えました'
// これはリアクティブにはならない(かけなくはないが)
vm.name= '名前'

そもそもインスタンスにmessageはあるので

@click="message"

は変わるけど、インスタンス内になく、外から追加した

は変わらない、ということです

リアクティブにしたいものはインスタンスのdata内に置いておきましょう、ということです

なぜかというと、

• インスタンスないでリアクティブシステムが実行されてる
• Vue.jsは、インスタンスが作成された瞬間に全てのプロパティそれぞれに、getterとsetterを用意します。(watcher)

getter

その変数が参照された時に実行される

setter

messageが書き換わった時に関数を実行

watcher

• setterをトリガーに何かの関数を実行したい
• データを再描画させるとか