サンプルソースでVue.jsと生Javascriptを比較！YAML形式をチェックするソースを作ってみた

Vue.jsは学習コストが低いらしいので触ってみました。らしいというはVue.js以外に自分が触ったことがないから。
そもそもリアクティブってなんだ？という方には以下が分かりやすいです。
あなたは、”プロ・アクティブ”それとも”リ・アクティブ”？

世の中には自分から考えて行動を起こす人と、
他人に言われたり、何か物事が差し迫ってきて
行動を起こすタイプの人がいる。
前者をプロ・アクティブ
後者をリ・アクティブと言う。
引用元：Daily Inspiration

リアクティブの概要や登場の経緯はこちらが分かりやすいです。
リアクティブシステムが注目を集める理由 | Think IT（シンクイット）

もっと深い話が知りたい方はこちら。
リアクティブプログラミングとは何だったのか - Qiita

そしてVue.jsを学びたい方はこちら。
ChromeならF12を押してコンソールを開きながら動きを学ぶと理解が早く進みます。
はじめに — Vue.js

作成するサンプル

先にVue.jsで作ったサンプルがこちらです。
YAML Online Checker

YAML形式をチェックするサンプルソース（生Javascript）

以前生JavascriptでYAML形式をチェックするプログラムを頑張って作ったことがありました。
js-yamlというライブラリを使って作ったサンプルが以下です。
GitHub - nodeca/js-yaml: JavaScript YAML parser and dumper. Very fast.

このソースを作るのに結構調べました。
3行目でキー入力イベントをキャッチしてcheckChange関数を毎回呼んでいます。そしてoldYamlとyamlを比較して変更があったときだけチェックしてJSON変換をするという処理です。
ポイントは13行目でoldYamlとyamlに初期値を設定しているところです。ここはjavascriptを読み込まれたときに1度だけ呼ばれます。

YAML形式をチェックするサンプルソース（Vue.js）

生Javascriptで作成したYAMLチェッカーをVue.jsで作ったのが下記です。
ちなみにライブラリは先ほどと同様js-yamlを使っています。
GitHub - nodeca/js-yaml: JavaScript YAML parser and dumper. Very fast.

生javascriptと比べたらかなり簡潔に見えませんか。
#areaのv-model:messageが変更されるたびに、YAML形式をチェックしてJSON変換しjsonTextに結果を表示する処理を行っています。