Vue.js(算出プロパティ(getter・setter)・nextTick)(Laravel使用)

[参考記事](https://cr-vue.mio3io.com/guide/chapter4.html)をもとに進めさせていただきます。

##◆算出プロパティ
処理を含めることができるデータで、メソッドとの違いは結果をキャッシュできるため、処理を高速にさばくことができます。
[メソッドと算出プロパティの違い](https://public-constructor.com/vuejs-computed-property/)

```
<body>
    <div id="sample">
        @{{ one }}の2倍は、@{{ double }}
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            one: 1
        },
        computed: {
            double(){
                return this.one * 2
            }
        }
    });
</script>
```

##◆ゲッター・セッター
上の例では、データを基に計算した値を返すゲッターの役割を担っていましたが、セッターとゲッター両方設定することが可能です。

```
<body>
    <div id="sample">
        <input type="text" v-model.number="one">
        <input type="text" v-model.number="double">
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            one: 1
        },
        computed: {
            double:{
                get(){
                    return this.one * 2;
                },
                set(double){
                    this.one = double / 2;
                }
            }
        }
    });
</script>
```

v-model.numberを使用して、数字入力でデータを同期させて、getでは、oneの値が変わると、doubleの値も変わります。
doubleから入力すると、oneの値がsetされるようにしました。

##◆ウォッチャ
算出プロパティは元のデータが変更されると処理が走ります。
ウォッチャもデータの変更があったときに、処理が走ります。基本的には算出プロパティを使用すればよいのですが、非同期処理なんかの時はウォッチャを利用したほうが良いです。
[参考記事](https://jp.vuejs.org/v2/guide/computed.html)

```
watch:{
	データ:function(新しい値,古い値){}
}
```

個別に指定するときの指定の仕方

```
this.$watch(データ, function(新しい値,古い値){}, オプション)
```

##◆フィルタ
フィルタを利用することで、数字や文字に細工ができます。
{{データ | フィルタ名}}で指定できます。

```
<body>
    <div id="sample">
        @{{price | localeNum}}
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            price: 3000000000000
        },
        filters:{
            localeNum(price){
                return price.toLocaleString();
            }
        }
    });
</script>
```

javaScriptのtoLocaleStringを利用して、3桁ずつ数字を区切るようにしています。
ちなみにfilterに引数を持たせることも可能です。

##◆カスタムディレクティブ
v-bindのようなものを自作できる機能です。下の階層のDOMにアクセスする必要がある場合に使用します。
[カスタムディレクティブ](https://jp.vuejs.org/v2/guide/custom-directive.html)

```
<body>
    <div id="sample">
        <input type="text">
        <input type="text" v-focus>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        }
    });
</script>
```

directivesに登録することで使用でき、insertedは要素が挿入されたときです。今回ならv-focusをもつinputタグのほうにfocusを充てるようにしました。

##◆nextTick
更新後のDOMにアクセスする際に、nextTickを利用します。用途は、データ更新後DOMにアクセスしたときにタイムラグが発生し、思い通りのデータが取得できないことを、nextTickを使えば、更新後に読むので防げます。

```
<body>
    <div id="sample">
        <div ref="message">
            <p>@{{ message }}</p>
        </div>
        <button @click="addMessage">メッセージ追加</button>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            message: ''
        },
        watch: {
            message() {
                console.log(this.$refs.message.clientHeight);

                this.$nextTick(function () {
                    console.log(this.$refs.message.clientHeight);
                })
            }
        },
        methods: {
            addMessage(){
                this.message = 'sample';
            }
        }
    });
</script>
```

<b>this.$nextTick</b>の中で、更新後にしたい処理を記述します。
一つ目のconsole.logでは、ボタンを押したときの高さは取得できません。
二つ目のconsole.logでは、更新後に高さを取得するので、高さを取得することができます。