Vue.js computed、watch

今回は、computedとwatchをやります。
computed(算出プロパティ)は、getter、setterを使って、変数みたいな動作をします。
watchは変数の変更を監視します。

computedは自分以外の変数を監視して、変更があったら自分の値を再計算し、
watchは自分の変数を監視し変更があったら定義しておいた処理を実行します。

シンプルな形(getter)

Vue 3


<script setup>
import { ref, computed, watch } from 'vue';

const aaa = ref("")
const bbb = computed(() => { return "[" + aaa.value + "]" })
let ccc = ref("")

watch(aaa, (after, before) => {
  ccc = before + '->' + after;
})

</script>

<template>
  aaa:<input type="text" v-model="aaa" />
  <br />
  bbb:{{ bbb }}
  <br />
  ccc:{{ ccc }}
</template>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        aaa:<input type="text" v-model="aaa" />
        <br />
        bbb:{{bbb}}
        <br />
        ccc:{{ccc}}
    </div>

    <script type="module">
        var app = new Vue({
            el: '#app',
            data: {
                aaa:"Hello",
                ccc:""
            },
            computed: {
                bbb: function () {
                    return "[" + this.aaa + "]";
                }
            },
            watch: {
                aaa: function (after, before) {
                    this.ccc = before + '->' + after;
                }
            }
        });
    </script>
</body>

</html>

画面イメージ

getter、setter

Vue 3


<script setup>
import { ref, computed } from 'vue';

let aaa = ref(10)
const bbb = computed({
  get() {
    return aaa.value * 2;
  },
  set(after) {
    aaa.value = after / 2;
  }
})

</script>

<template>
  aaa:<input type="text" v-model="aaa">
  <br />
  bbb:<input type="text" v-model="bbb">
</template>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        aaa:<input type="text" v-model="aaa">
        <br />
        bbb:<input type="text" v-model="bbb">
       
    </div>

    <script type="module">
        var app = new Vue({
            el: '#app',
            data: {
                aaa:10
            },
            computed: {
                bbb: {
                    get: function () {
                        return this.aaa * 2;
                    },
                    set: function (after) {
                        this.aaa =  after / 2;
                    }
                }
            }
        });
    </script>
</body>

</html>

画面イメージ

$emitで親にイベント送信できます。引数には送信先を指定します。
引数を渡したい場合は送信先の後ろに付けられます。

ページのトップへ戻る