Vueをやり初めて見慣れない記法がありました

vue.jsの勉強中

vue.jsに見慣れない記法が存在しました。
それこそがcomputed演算子でした。computedは変数や関数自身に
連動して、functionを連鎖的に実行する文法ですが、チェーンのように
一繋がりになっているのは良いことです。しかし

連鎖的にトリガーが入るのは
良いのですが、連鎖反応自体を止める方法が判りません。

computedの連鎖を断ち切る

該当のソースコード

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="app">
<input v-model="writtin" type="text">{{writtin}}
<!--<div :nuts="nuts" :second="second" :third="third"></div>-->
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script>
new Vue({
	el:"#app",
	data:{
		writtin:'',
	},
	computed:{
		third:function(){
		return this.second
		},
		second:function(){
		return this.nuts
		},
		nuts:function(){
		return this.writtin
		}
	}
})
</script>
</body>
</html>

試したこと

チェーンのルーツにnullを入れたりundefinedを入れて見ましたが、
実行の根本は止めることができませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

それこそがcomputed演算子でした。computedは変数や関数自身に

連動して、functionを連鎖的に実行する文法ですが、

この認識は少し誤解があるかも

computedは、dataの値に変化が起きたときにリアルタイムで反応(React)して参照している先に返してあげるという機能の記述方法なのでcomputedで繋げるのなら連鎖して当然です。
想定される主な用途としてはdataの値に変化を与えずdataの値に何らかの加工をしたものを返すものかと思います。
ユースケース的には姓(lastname)、名(fullname)が別々のデータになっていたときに氏名(fullname)を返したり、敬称付けるとか。商品の金額のdataに対して税率かけたものを返すとかになります。

従って、<div :nuts="nuts" :second="second" :third="third"></div>の記述は文法的に間違ってはいないけど連鎖させないという意図としてはユースケースが誤っていると思います。

呼ぶ呼ばないを制御したいのならば methodで書くと思います。

投稿2018/07/15 23:48

euledge

総合スコア2404

Vueties

2018/07/16 00:33 編集

<div :nuts="nuts" :second="second" :third="third"></div> 確かにここに連続して、関数を呼んでる思いますが、 nutから順番に呼び出していくのを仮定として、secondの関数内で何らかの値をセットして、thirdの関数に入らないように何らかの施しを加える。これって仕様外でしょうか？強い楔のような決め手が欲しいのです

euledge

2018/07/16 01:31 編集

computedは関数ではなくプロパティ（つまりクラスのフィールドに対するgetter）なので必ず値を返さなければなりません。それを参照していれば値が変われば連鎖はしてしまうのはvueの仕様上仕方がないと思います。連鎖させたくないのであればsecond,thirdが監視するものを computedの返値ではなく dataの値とするべきかと思います。その上で監視されるdataの値をセットしたりしなかったりする必要があると思います。

行動規範の内容に同意します