JSFiddle - React, Tailwind, and code Playground

by hronic

HTML

<div id='app'>
<input v-model="a" type="number"><br>
<span >new: {{ a }}</span>
<span>old: {{ old }}</span>
</div>

JavaScript

var vm = new Vue({
	el: "#app",
  data: {
    a: 1,
    old: '',
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('новое значение: %s, старое значение: %s', val, oldVal)
      this.old = oldVal;
    },
    // строка с именем метода:
    b: 'someMethod',
    // глубокий (рекурсивный) наблюдатель:
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // коллбэк будет вызван сразу же после начала наблюдения
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // отслеживание значения `vm.e.f`: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})