Vueインスタンスは普通どのくらいの範囲を指定するのか

言いたいこと

<body>のような大きな範囲をごっそりVueインスタンス化するものなのか、多少の値の出入りがあってもまとまりであればそれぞれをVueインスタンス化するものなのか、Vueインスタンスを作るときの目安が知りたい、という話です。

質問の経緯

いま自分が開発しているものでは、例えば<nav>や<main>にそれぞれidを付けてVueインスタンスを作っています。navとmain間で多少の値の受け渡しがあります。しかし、作っている途中でnavやmain自身の属性をバインドする必要が出てきました。これは出来ないので<body>にidを付けてまとめてインスタンス化しようとしています。
ですが、dataやmethodsがたくさんできて見づらくなるかもしれない、そもそも<body>からごっそりインスタンス化するものなのか？という考えや疑問が湧き、質問に至った次第です。

聞きたいこと

インスタンス間の値の受け渡しを避けてインスタンスの範囲を決定するべきなのか？
範囲を大きくした場合にdataやmethodsのプロパティがたくさん増えることはやむを得ない事なのか？

この2点でお願いします。
範囲指定に要素は普通<div>を使うことは回答者さんのご教示で理解しました。

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

回答3件

一般的には<nav>や<main>にそれぞれidを付けず
body内に<div id="app"></div>を作る。
(bodyにidを付けてインスタンス化というのはあまりない)

投稿2019/08/06 16:13

yasutomi

総合スコア2937

ast

2019/08/06 17:01 編集

ではその<div id="app"></div>の範囲はどう決めるのでしょうか。私の例で言うと<nav>や<main>ごとになるのですか？範囲の目安を知りたいです。あと、結局インスタンス間の値の受け渡しの有無も関わって来るのでしょうか…？

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

いま自分が開発しているものでは、例えば<nav>や<main>にそれぞれidを付けてVueインスタンスを作っています。navとmain間で多少の値の受け渡しがあります。しかし、作っている途中でnavやmain自身の属性をバインドする必要が出てきました。これは出来ないので<body>にidを付けてまとめてインスタンス化しようとしています。

ですが、dataやmethodsがたくさんできて見づらくなるかもしれない、そもそも<body>からごっそりインスタンス化するものなのか？という考えや疑問が湧き、質問に至った次第です。

自然な考え方だと思います。後半のdataやmethodsが多くなってきたらコンポーネントとして切り出してください。ついでに再利用できるようになります。多分コンポーネントを切り出し始めるとpropsとemitでめんどくさいと思い始めるので、そのときはvuexというキーワードで調べてみると良いです。

投稿2019/08/07 03:44