Vue: 2.0変更点

特定の機能がスタンドアロンビルドでのみ利用可能になることを確認しました。 これは、これとNPMバージョンが大幅に異なることを意味しますか？

@rekateka 2.0スタンドアロンビルドとは（コンパイラ+ランタイム）を意味します。 NPMパッケージのデフォルトのエクスポートはランタイムのみです。これは、NPMからインストールする場合、ビルドツールを使用してテンプレートをプリコンパイルする可能性が高いためです。

ありがとう、@ yyx990803。 コンパイラやその他の機能に関して、まだいくつか質問がありますが、そのためにフォーラムを使用しました。

万が一レビューする必要のあるドキュメントに気になる変更が加えられていますか？ すごい仕事！ 男を維持します。 あなたはウェブ開発を再定義しています。 ありがとう！

ディレクティブのthis.argを取得できますか？

vnode.data.directivesはargありますが、2つ以上のディレクティブがある場合、 index知ることができません。

<!-- show @ 0, img @ 1-->
<img v-show="true" v-img:200*200="imgSrc">

<!-- img @ 0, show @ 1-->
<img v-img:200*200="imgSrc" v-show="true">

forEachを使用する必要がありますか？ ありがとう！

@banricho良い点、それは見落とされています！ 更新されたディレクティブ関数のシグネチャを参照してください。

まず第一に、申し訳ありませんが、ここでこの問題を尋ねることができるかどうかはよくわかりません。少し要件があります。
要件は、コンポーネントの使用法をこのように設計できることを願っています

<carousel>
  <img src="..." alt="..." desc="..." is="argument">
  <img src="..." alt="..." desc="..." is="argument">
</carousel>

私は子供たちが属性の制限だけでなく、ある種の議論のようになることを願っています
今のところ私はコンポーネントを作ることができます、使用法は次のように

<carousel items="[{}, {}, {}]"></carousel>

しかし、それはあまり良くないと思います。Reactのカバーフローで以前に作成したものが好きになることを願っています

@ andyyou-この質問は、問題でも、明確な提案でも、この問題に対する実際の助けでもないので、おそらくフォーラムに投稿するのが最適です。

http://forum.vuejs.org/

フォーラムスレッドでVueを使用して要件を満たせないことがわかった場合は、ここで新しい問題を開くことができます。

スコット

@smolinariありがとう

「しかし、より複雑なケースでは、Vuexを使用して専用の状態管理レイヤーを導入することをお勧めします。」 これは、状態をイベントに対して使用する必要があることを意味しているようです。 私はそれらを完全に分離していると見ています-イベントは瞬間ですが、状態は変化しません。 状態を見ることができると言えますが、それは特定の瞬間を伝えるものではなく、何かが変わるときはいつでも伝えます。 この推奨事項の背後にある意味に興味があります。

@jrenton一般に、イベントシステムは、単にコンポーネントAがコンポーネントBに状態を変更するように指示する、またはAがBに何か他のことをするように指示するものと見なすことができます。
したがって、最初のケースでは、イベントシステムを使用してAがBに状態を変更するように指示する代わりに、状態管理（AとBの共有状態を管理する）を使用できます。
2番目のケースでは、「イベントバス」アプローチでかなりうまく処理できると思います。

互いに話し合うコンポーネントのスープの代わりに@jrentonは、コンポーネントがアクションで「意図」を表現し、突然変異で「事実」を記録するための単一のチャネルを提案します。

私はVueと一緒にTwigを使用しています。

これまで（vue 1.0）、次のようにデータをコンポーネントに渡してきました。

<my-component data="{{ DATA }}"><my-component>

（ {{と}}は小枝タグであることに注意してください-vueの場合、カスタム区切り文字${と} ）

私が物事を正しく理解している場合、Vue2.0では次のようにする必要があります。

<my-component :data=" '{{ DATA }}' "></my-component>
正しい？

@ghololいいえ、それはただです

<my-component :data="{{ DATA }}"></my-component>

実際、あなたの古い使い方はそもそもうまくいかないようです。

まあそれはうまくいきました...

私が言ったように、データは小枝テンプレートエンジンから来ています。 現在、Vue2.0では機能しません。 私はあなたが言ったように（単一のアポストロフィなしで）それを渡そうとしましたが、データプロパティは未定義になります。

エラー：SyntaxError：プロパティリストの後に}がありません

編集：それは動作します、DATA変数が文字列であることを言及するのを忘れました

@jrenton私の考えと動機は非常に単純ですtemplateを選ぶことができます。

slimようなテンプレート言語では、属性が少し多い場合や属性の名前が非常に長いと言う場合は、子要素の構文をパラメーター（引数）として親に渡すことができるといいのですが、 1行にすべてのもの。 80文字を超える1行のコードを作成する方が簡単です。

@ yyx990803今日の冒険心は、1.0から2.0aに移行するのにどれだけの労力がかかるかを知りたいと思っていました。残念ながら、単純な補間を使用できなくなったため、 <input type="text" name="account[categories][{{ category.id }}]">ような単純な処理を行うにはどうすればよいでしょうか。 2.0？

ES6インラインテンプレートは、バインディング式で機能します。

<input type="text" :name="`account[categories][${ category.id }]`">

https://jsfiddle.net/Linusborg/cm4v75xh/

これが2.0で機能する唯一の方法である場合は、1.0が慣れ親しんだ素敵な構文のリグレッションだと言ってもかまいません。はい、それはES2015だけです。

パフォーマンス上の理由で補間が削除されたと思いますか？ 私はそれが醜い構文の価値があることを願っています。

@oskarkrawczyk DOMでname="account[categories][fruits]"ようなものになりたいと思います。これは、式がレンダリングするものだからです。

2.0バージョン（および実際には適切な1.0）は:name=" 'account[categories][' + category.id + ']' "ます。

@simplesmilerわかりました。 {{ }}私を少し甘やかしたと思います。

@ yyx990803このようにコンポーネントを動的に挿入できますか？

    render () {
        return this.$createElement('div', { staticClass: 'list-container' }, this.list)
    },
    data () {
         return {
               list: []
         }
    },
    method: {
         a () {
               this.list.push(this.$createElement('myComponent', {}))    
         }
    }

式に依存する属性のいくつかの値をバインドするにはどうすればよいですか？ 例えば：

new Vue({
  el:'body',
  data:{
    flag: true
  }
})

<input type="text" v-bind:placeholder="{test: flag, test2: !flag}" />

次の結果を期待しています：

<input type="text" placeholder="test" />
<!-- or -->
<input type="text" placeholder="test2" />

@nervghこれはこの質問をするのに適切な場所ではありません。
三項式v-bind:placeholder="flag ? 'test' : 'test2'"ます。

@simplesmiler 、あなたの答えに感謝します。 _Object-Syntax_はこれらの場合に役立つと言いたいのですが、期待どおりに機能しません。

@nervghオブジェクトの構文は、文字列のリストを受け取る属性にのみ適用できます。 ネイティブ属性のうち、そのような属性はclassであり、コンポーネントの場合、文字列のリストを送信するのか、適切なオブジェクトを送信するのかを子側から検出する方法はありません。

Re： .onceと.syncは非推奨になりました。

これは本当に一般的なデザインパターンを壊しませんか？

これらがないと、フォームフィールドを処理するための単純なコンポーネントをどのように作成できるか考えられません。

さまざまなフォームフィールドタイプ用の単純なコンポーネントがあります。たとえば、「テキストボックス」コンポーネントテンプレートは次のとおりです。

<label>{{type.caption}}:<input type="text" v-model="data"></label>

...また、データ構造内の配列に要素を追加および削除するためのUIを提供するリスト用のより複雑なコンポーネント

次に、これらのコンポーネントを次のように使用します。

<div v-for="field in type.fields">
    <component :data.sync="data[field.name]" :is="field.ctype" :type="field">

注：これらのコンポーネントにはすべて、 dataとtype 2つの小道具があります。 dataは、コンポーネントが編集用のUIを提供する、編集中のデータ構造内のノードであり、 typeは、タイプを含む（大規模で静的な）データ構造内のノードです。 / fields階層。

.syncなしでそのようなものはどのように機能しますか？

これらのコンポーネント間にある種のメッセージングシステムを作成すると、サブコンポーネントがどのサブコンポーネントであるかを親と何らかの形で通信でき、親がデータのどの部分を把握できるかが非常に複雑になるように思われます。変更する構造。

コンポーネントを使用してデータ構造の一部のエディターを作成することはアンチパターンであるとおっしゃっているように見えるので、何かが足りないことを心から願っています。 わぁ？ これまでのところ、Vueを使用したのはそれだけです。 この機能を削除すると、よりクリーンなコードを書くようになると思います。 たぶんそれは何人かの人々にその影響を与えるでしょう、しかし多くの人々はこの制限を回避するためにもっと厄介なコードを書くでしょう。 状態の変更は、コンピューターが行う唯一の便利なことです。 これをもっと簡単にしてください。

2.0の@JasonWoof v-modelは、カスタムコンポーネントで機能します。 コンポーネントは単に次のことを行う必要があります。

1. valueという名前の小道具を公開する
2. 値を親に同期する必要がある場合、 inputイベントを発行します（例： this.$emit('input', value)

例を参照してください。

@ yyx990803説明とリンクをありがとう。 今私は立ち往生しています：

なぜ.sync削除するのですか？

メリットはわかりませんが、デメリットだけがわかります。 リンクした例は、 :selected.syncまたはv-modelいずれかで同じことを達成できることを示しています。 v-modelメソッドの欠点だけがわかります。

1. サブコンポーネント側にかなりのボイラープレートが必要であり、より複雑で、より多くのことを学ぶ必要があります。
2. v-modelでは1つの値しか渡すことができませんが、複数の.sync小道具を持つことができます

v-modelに切り替えると、どのようにすっきりしたものになるのかわかりません。 どちらの場合も、子コンポーネントが親の状態を簡単に変更できることを示す親の唯一の指標は、テンプレートの小道具の構文です。 .sync方が明確だと私は主張します。

もう1つは、オブジェクト/配列などを小道具として渡すと、それらは子コンポーネントから変更可能になるということです。 したがって、この場合、プログラマーが子コンポーネントから状態を変更できないようにすることはできません（これは非常に一般的だと思います）。したがって、障害を引き起こすものを削除して、つまずきを導入しているように見えます。文字列値の受け渡しは、オブジェクト値の受け渡しと同じように機能します。 .syncは、データ型に関係なく、常に子側から「データ」プロップを書き込み可能にすることで、コードをよりシンプルで一貫性のあるものにします。

私はVue.jsを初めて使用しますが（3日前）、これまでのところ、Vue.jsは主に次の2つの理由で価値があります。

1. テンプレートを使用した簡単なDOM操作
2. テンプレート変更のトリガーを含む、値/データ変更の自動伝播

少なくともそれは私がこれまでに発見したことです。

.syncを削除すると、Vue.jsに2番目の処理を一貫して実行させることが難しくなるように思われます。

@JasonWoofは、コンポーネント自体の範囲外の明示的な副作用と暗黙的な副作用が、長期的な保守性にすべての違いをもたらすためです。

...そして、人々は.sync使用しない場合を単に学ぶべきであると主張することもできますが、これまでの経験は異なります。 人々はこれに過度に依存し、後でほとんどデバッグできないコードを作成する傾向があります。

したがって、これは人々に最初からそれを強制するという設計上の決定です。

例：

• 親と子の間で値nameを同期します。 すべては順調です。
• _ 'ねえ、その値が変わったら、親で何かをする必要があります！' _
• そこで、 watch関数を作成します。 良い！
• 後で、ウォッチャーが望まないときに発砲するように見えることに気付きました。 しかし、動作を追跡するためにconsole.log()どこにも配置できないため、理由はわかりません。
• よく考えた結果、私たちは、子や「祖父母」ではなく、親で値が変更されたときにのみ、その_何か_が発生することを望んでいることに気付きました。
• ここで、 watch関数でこれらのシナリオを何らかの方法で区別する方法を見つけようとします。
• これが単純なことを非常に複雑にすることを理解するためだけに
• そして最後に、誰かが同期を削除するように指示したので、それをすべて破棄し、一方向のプロップと発行されたイベントを使用して状況を処理します-コードはより単純でより明確になるので、方法とデータが流れ、デバッグが容易になるとき。 バグはすぐに見つかり、先に進むことができます。

...そして、複数のレベルの深さで同期すると、これはさらにクレイジーになります。

これは、フォーラムや雑談で何度も見た（アンチ）パターンです。

.sync削除すると、ほとんどの場合、コードが.syncに対して十分に単純なままではなくなるため、最初から明確でわかりやすく、保守しやすいコードを作成する必要があります。

わかった。 説明ありがとうございます。

あなたが解決しようとしている問題を聞くのは良いことです。

しかし、これが役立つかどうかは真剣に疑っています...人々があなたの好きなパターンを簡単に壊すことができないようにし、人々が制限を回避するためにはるかに悪いことをするようにします。

これは私に多くの抽象化を思い出させます。 抽象化は私たちを非常に多くの問題に巻き込みます。 それらはコードを読みにくくし、デバッグしにくくします...しかし、抽象化を行う能力を取り除くことによってこれを修正することはできません...それはプログラミングを可能/有用にするものです。 これに対する解決策は、言語やフレームワークのレベルではなく、教育、アドバイス、学習です。 物事を過度に抽象化しないように人々に勧めます。

あなたがそのようなデザイン哲学について話しているように私には聞こえます。 多くの場合、コーディング中に覚えておくのは素晴らしい哲学です。 しかし、それが制限として課され、プログラマーがこの制限によって彼女が必要なことを実行できなくなると考えた場合、彼女はそれを回避しようとします。これにより、回避しようとしていたすべての問題が発生し、さらに悪化します。

人々は子供から親の状態を変化させようとするのをやめようとはしません。 あなたは人々にそうしないように強制することはできません。

あなたのv-modelは非常に複雑なので、子が変更できるように親オブジェクト/配列とキーを渡すことでこの問題を回避します。

この最後のビットヒットは、私が伝えようとしていることの中心にあると思います。私は（個人的に） .syncの欠如を問題と見なし、それを回避するか、フレームワークを使用しません。 多くの人が同じアプローチをとるでしょう。

言うまでもないことかもしれませんが、人々が私にデザイン哲学を押し付けようとすると、少し腹を立てます。 私は、ひどく間違っているものを作り、それを二度としないことを学ぶほうが、私がそれをひどく使うかもしれないという恐れのために意図的に力を差し控えるシステムを使うよりもずっと好きです。

PS申し訳ありませんが、私は自分自身を助けることはできません、もう1つのコメント、それから私はあなたたちを放っておこう。 ほとんどのプログラマーは、デバッグできないコードを記述します。 これは、すべてのフレームワークのすべての言語のすべてのプログラマーに起こります。 これが、プログラマーがより優れたプログラマーになる方法です。彼らは間違いを犯し、修正できないコードを作成し、将来、別の方法で物事を書く方法を学びます。 自分自身を隅に抽象化するプログラマーが、デバッグできないほど混乱する前に、自分のフレームワークをもう少し混乱させたり複雑にしたりできるようにするために、フレームワークをだましてはいけません。

@JasonWoofは「を提供します。 あなたはあなたの個人的な意見に基づいてそれに反対することは自由ですが、私はあなたの議論がほとんど説得力がないと思います。

人々は子供から親の状態を変化させようとするのをやめようとはしません。 あなたは人々にそうしないように強制することはできません。

もちろん。 そして、これがまだ必要であるかもしれないいくつかのエッジケースがあるかもしれないので、私たちはそれらを「強制」しません。 したがって、引き続きthis.$parentにアクセスでき、小道具などを介して$dataを渡すことができますが、率直に言って、そうすることは、ほとんどのイベントで$emitするよりもはるかに便利ではありません。時間なので、 .sync砂糖ほど魅力的ではありません。

また、 $parent et.al. は公式ガイドの一部ではないため、それらを使用するユーザーは、提案されたベストプラクティスを積極的に回避しています。これは自由に実行できますが、その動作はお勧めしません。

したがって、フレームワークは、 .syncような「魔法の」シンタックスシュガーを提供することによって同様の動作を促進するべきではありません。そのような機能がほとんどのシナリオで誤用され、フレームワークが確立しようとしているベストプラクティスに反していると思われる場合です。

Youdaには中国語版がありますか？ 。

vue-routerの互換性はどのように見えますか？

@ roblav96

互換性を保つために必要な変更がいくつかあります。ルーターをVueにうまく組み込むことを望んでいます。

@ blake-newman

vue-cliでボイラープレートテンプレートをまとめることはできますか？ 私はこれを機能させることができないようです😢

@ roblav96

現在、いくつかの変更があり、互換性を持たせるためにvue-loaderでいくつかの変更が必要です。 現在、2.0は、大規模アプリケーションのすべての依存関係が更新されるまで、実験にのみ使用する必要があります。

ベータ/リリース候補のETAはありますか？

@EverttAlphaは今週の予定です。 ベータ版は、ドキュメントが完成し、コア拡張ライブラリ（Vue-router ect）からのサポートが増える可能性があります。 ベータ版が成功したことが証明されたら、候補者をリリースします。

@ blake-newmanは、迅速、簡潔、完全な対応に感謝します。 それらは最高です。 :-D

vue 2.0でのreplace: false回避策はありますか？

こんにちは、JSXはすでに使用可能ですか？

@ reohjs-いいえ

スコット

@reohjs昨夜のEvanのストリームで、彼はプラグインで作成できると述べたので、これがベータ版になると、誰かが作成するのにそれほど時間はかからないと思います。 コアに含まれていないことを嬉しく思いますが、JSXプラグインは素晴らしいアイデアのように聞こえます。

それがコアにないことを嬉しく思います

👍👍👍👍

ええ、プラグインでなければなりません。 ただし、見られるように、テンプレートには標準コンポーネントに多くの利点があります。

JSXのコンパイルは、このプラグインを使用して簡単に実行できるはずです： https ：

_h関数はReact.createElement代わりになると思います

2ウェイフィルターを置き換える方法として、カスタムvモデル修飾子を作成するためのインターフェイスを提供するのはどうですか？ それらはすでにユーザー入力の解析に使用されているようです（たとえば、 v-model.trim ）。 解析/フォーマットが単純で特定のデータプロパティから独立している場合、修飾子を使用すると、個々のデータプロパティごとに計算プロパティを設定したり、それぞれに新しいコンポーネントを作成したりするよりも、はるかに少ないボイラープレートで解析/フォーマットを再利用できます。解析/フォーマットを適用する入力タイプ。

こんにちは、私は現在Vue.js 1.0でgettextをサポートするプラグインに取り組んでおり、 vm.$interpolateを使用しているディレクティブがあります。

次の理由から、コードを2.0に移行する方法を知りたいです。

• vm.$interpolateは非推奨になります
• ディレクティブは2.0インスタンスを持たなくなります

または、ディレクティブよりも優れたアプローチはありますか？

import languages from 'src/plugins/translate/languages'
import translateUtils from 'src/plugins/translate/utils'

const translateDirective = {
  terminal: true,
  params: ['translateN', 'translatePlural'],
  paramWatchers: {
    translateN: function () {
      this.translate()
    },
  },
  isPlural: function () {
    return 'translateN' in this.params && 'translatePlural' in this.params
  },
  bind: function () {
    this.boundTranslate = this.translate.bind(this)
    this.msgid = this.el.innerHTML.trim()
    this.translate()
    languages.eventEmitter.on(languages.languageChangedEventName, this.boundTranslate)
  },
  unbind: function () {
    languages.eventEmitter.removeListener(languages.languageChangedEventName, this.boundTranslate)
  },
  translate: function () {
    let n = this.isPlural() ? parseInt(this.params.translateN) : 1
    let translation = translateUtils.getTranslation(this.msgid, n)
    this.el.innerHTML = this.vm.$interpolate(translation)
  },
}

export default translateDirective

私はVueを初めて使用するので、短い言葉を投げるだけです。API全般、または_under-the-hood_ヘルパーの削減を見てうれしいと言ってください。 JavaScriptはすでに非常に強力であり、計算されたプロパティに加えてフレームワークの他のリアクティブな機能を使用すると、ほとんどすべてを実現できます。

この_次の_リリースに対する称賛！ 🎆

@kemar私はgettextにあまり詳しくありませんが、Vue.prototypeを$ translateメソッドで拡張してから、

{{ $translate('some.Key.path') }}

アセットを配列構文で登録する機能は2.0から削除されましたか？ アルファに取り組んでいない、それが意図的かどうか疑問に思っているだけです。
すなわち：

components: [compA, compB, compC]

ES6には似たような速記があることは知っていますが、配列構文が役立つシナリオがいくつかあります。

rendering to native interfaces on mobileとweexについておっしゃっていますが、vueと思いました。

VueのNativescriptに沿ったものは、あなたが言及したWeexまたはQuasarのいずれかです。

スコット

dispatchまたはbroadcastなくなった場合、汎用の子コンポーネントはその親にイベント/変更をどのように通知しますか？ これは、グローバルバスまたはvuexのパターンに適合していないようです。 現在使用しているユースケースは、検索フィルターの範囲スライダーです。 範囲スライダーコンポーネントは汎用であり、いくつかの異なる検索フィルターの子です。 現在、範囲スライダーのスライドが終了したときにdispatch使用しており、親は変更に基づいて検索をトリガーすることを知っています。

@jrentonインラインリスナー<child @some-event="parentHandler">

素晴らしい仕事の人。

私の見解では、すべての変更は、「一方向フロー」のみに基づいてコンポーネントツリーを作成することが最善のアプローチであると言っています。これは、デバッグと保守がはるかに簡単で簡単です。

これがないと、データの真実性は、最上位のコンポーネントからの距離に反比例します。

ただそれを言いたい：

render (h) {
    return (
    <div>
      {this.things.map(thing => <Thing thing={thing}></Thing>)}
   </div>
 );

私を幸せにします

2.0のリリース前に、このリストにさらに追加されると予想されますか？ 問題はまだ開いているので、ただ興味があります。

@zephraphはい、APIを更新する

過去にイベントディスパッチを使用したことがあり、vuexで立ち往生しています。親コンポーネントには子コンポーネントのリストがあり、値が変更されたときに子がイベントをディスパッチしていたため、親は次のように何かを行うことができました。その変化の反応。
ここで、vuexストアに子の値の配列を設定しようとしました。 重要なのは、子コンポーネントがゲッターで、そしてアクションで、その配列のどの要素を更新する必要があるかをどのように知るかということです。 私が見る限り、vuexは値の変異を動的に取得またはトリガーする機能を提供していませんか、それとも私はそれについて間違っていますか？
イベントをディスパッチせずにこのケースを処理するための最良の方法は何でしょうか？

$broadcastが削除された状態で、特定のことが起こったときに直接の子供に何かをするようにどのように伝えますか？ これは、データが実際に変更されていないシナリオであるため、リアクティブプロップは適合しないようです。

小道具を使用してタイムスタンプまたはランダムデータを渡し、子供でその小道具を見ることができますが、それは奇妙に思えます。 グローバルイベントバスでは一意のIDを生成する必要があるため、子は親からのイベントにのみ反応し、親コンポーネントの他のインスタンスには反応しません。

親がインラインリスナーを使用して聞くことができる子には$emitがありますが、その逆に何かありますか？

小道具を介してエミッターのインスタンスを渡し、次に子でemmiter.onを渡すことができますが、それ

@gwilduアクションは引数を取ることができるため、アクションと一緒にアイテムIDを渡すことができます。 また、アイテムコンポーネントにストアから対応するアイテムをフェッチさせる代わりに、親のリストをフェッチし、小道具を使用してアイテムデータをアイテムコンポーネントに渡します。

// Vuex store
state: {
  items: [],
},
mutations: {
  ITEM_REMOVED: function(state, id) {
    var io = state.items.findIndex(item => item.id === id);
    state.items.splice(io, 1);
  },
},

// within the parent component
vuex: {
  getters: {
    items: state => state.items,
  },
  actions: {
    removeItem(store, id) {
      store.dispatch('ITEM_REMOVED', id);
    },
  },
},

<!-- within the parent template -->
<item v-for="item in item"
  :item-data="item.data"
  @removed="removeItem(item.id)"
>
</item>

<!-- within the child template -->
<button @click="$emit('removed')">Remove</button>

アイテムにローカルで一意のIDがない場合は、アイテムがAPIから作成または受信されたときにIDを生成できます。 ほとんどの場合、 cuidはそのために十分です。

@fergaldoyleは、親がv-ref:some-childして、子のvmへの参照を取得してから、 $emitを指定するか、メソッドを直接呼び出すことができます。 this.$refs.someChild.<methodName>(...) 。

ただし、その場合はアーキテクチャを再考することをお勧めします。これは、発生するイベントによってコンポーネントの推論が非常に困難になるためです。

私はvuejs2で遊んでいましたが、合格するとSnabbdomに気づきました

h('div', {style: {color: '#000'}}, [
  h('h1', 'Headline'),
  h('p', 'A paragraph'),
]);

あなたが得るレンダリング関数に

<div style="color:#000;"><h1>Headline</h1><p>A paragraph</p></div>

しかし、vuejsでは

<div style="color:#000;"><h1></h1><p></p></div>

テキストコンテンツ（ <h1> ）を変更する方法はありますか？

@dubcanadaなぜ子供としてそれらを渡すのではないのですか？

そうですね、それは理にかなっています。 ありがとう

こんにちは。 Vue 2.0の移行システムについて質問があります。それは、Vue 2.0の計画に含まれていないため、提案です。 Vue 1.0では、設定したトランジション/アニメーションがいつ終了するかを検出する必要が生じることがよくありました。 今、私はsetTimeoutを使用してこれを行いますが、これは非常にハッキーで醜い方法であり、私たちは皆同意することができます。 だから私の質問は、おそらくイベントを介して、v-show / v-ifと組み合わせて遷移を使用するときにCSS遷移の終了を検出する何らかの方法でVue2.0になりますか？

<my-comp v-show="isVisible" @transition-end="onTransitionEnd" transition></my-comp>

次のVueリリースでこのようなものを見ることができてとてもうれしいです:)私を聞いてくれてありがとう

@sqalトランジションフックでそれを行うことができます： https ： //jsfiddle.net/simplesmiler/Lrk9sxjf/97/

@dubcanada次のリリースでサポートされる予定です（要素の作成時にデータを省略します）

ヒントを出すために@fergaldoyleと@simplesmilerに感謝します。

私は気づいていませんでした、親は子供によって発せられたイベントを聞くことができます。 もちろん、そのときは、その泡立たないイベントを聞く方が理にかなっています。

こんにちは、みんな。 少し背景があります。私たちはwebglを使用しており、3Dサーフェス上でいくつかのインターフェイスを実行したいと思います。 これは、たとえばキャンバスへのインターフェイスをレンダリングしてから、キャンバスのコンテンツをテクスチャに変換する必要があることを意味します。

私はAngular、React、Vueを使用してきましたが、私にとってはVueが最も理にかなっています。 Reactについて読んでいるときに、react-canvasプロジェクトに出くわしました。 興味深いのは、仮想DOMを実際のDOMノードに変換する代わりに、キャンバスに描画することです。

Vue 2.0も仮想DOMを使用しているので、このようなこともできるのだろうかと思っていました。

こんにちは、

.syncの削除と、汎用コンポーネントで小道具を処理するための汎用ワークフローがどのようになるかを少し説明します。

だから、
<component :value.sync="some.value"></component>
に
<component :value="some.value" @update="updateSomeValue"></component>

小道具valueを追跡するための推奨される方法は何ですか？
最も基本的なケースでは、

props: ['value'],
computed: {
    _value: {
        get(){
            return this.value;
        },
        set(newVal) {
            this.$emit('update', newVal);
            return newVal;
        }
    }
}

ただし、これは確かに親コンポーネントがその値を小道具に返すことに依存しているため、コンポーネントが再び値を取得すると、最新の変更が反映されます...

これは、次のようなことを行う必要があることを意味しますか。

props: ['value'],
data() {
    return {
        _val: this.value
    }
},
watch: {
    value(newVal) {
        this._val = newVal;
    }
},
computed: {
    _value: {
        get(){
            return this._val;
        },
        set(newVal) {
            this._val = newVal
            this.$emit('update', newVal);
        }
    }
}

これは、値の受け渡し（および変更）を処理し、値が変更されたことを親に通知し、変更が親によって伝播されない場合に内部で変更を追跡するための多くの定型文のようです。

それとも、ここでVueの魔法の反応性が少し欠けていますか？

また、処理する小道具がたくさんある場合、これは非常に複雑になる可能性があります。
子供たちが直接変異するためにthis.$parent.valueにアクセスし、ラッパーコンポーネントが小道具/計算/時計を処理するだけのラッパーコンポーネントを作成しているのをほぼ見ることができました。

@Towerful 「価値を追跡する」とはどういう意味ですか？ そして、なぜ明示的なthis.$emit('value-updated', newValue)代わりにセッタースタイル（ this._value = newValue ）が必要なのですか？

一方向フローの利点は、親が子から要求された変更を適用しないことを決定できること、または子を「保留」としてマークして後で変更を適用できることです（たとえば、サーバーに確認した後）。

計算されたプロパティを使用する@simplesmilerを使用すると、テンプレートにバインドできます。 したがって、 v-model使用できます。
また、セッターとゲッターを1つの場所に含めると、コンポーネント内で値にアクセスして値を変更し、コード全体に分散させるさまざまな方法とは対照的に、値が更新されたときに機能を簡単に確認できます。
モデル内で明示的な方法を使用し、セッターを使用しない場合、実際のメソッドではなく、 methodsオブジェクトがテンプレートのupdateValueタイプのメソッドで乱雑になるようです。

これは、ユーザーがコンポーネント内のオプションを選択し、コンポーネントがその値に依存して何が選択されているかを示す場合に当てはまると思います。
親コンポーネントがそれを実行できるようにするには、それをコンポーネントに戻すことに依存しています。
ユーザーがオプションを選択したときに、コンポーネントの表示の更新を手動でトリガーしない限り。 これはVueの反応性から遠ざかっているようです。
したがって、内部値に「あるべき姿」を追跡させ、テンプレートにそれに反応させます。 セッター/ゲッターを使用してプロパティをラップし、内部の変更を追跡して外部のイベントを発生させ、プロパティを監視して、外部で変更されたときに内部の値を更新します。

たぶん、私はそれを行うための新しい方法に頭を悩ませるのに苦労しているだけです。

@ Towerful-あなただけではありません...

スコット

@タワーフル：

私には、あなたが説明しているのは本質的にv-model入力のように機能するコンポーネントのようです。ユーザーがUIの値を変更し、その変更をバインドされたデータにすぐに反映させたいと考えています。

これらのタイプのコンポーネントの場合、2.0のコンポーネントでv-modelを使用できます。

<my-input v-model="myValue">

// in my-input.vue
<input :value="value" @change="$emit('input', $event.target.value)">

export default {
  props: ['value']  //special prop received from v-model
}

これにより、実際の<input>要素とカスタム入力コンポーネントへのインターフェイスが本質的に同一になり、双方向のバインディングになります。

複数の小道具を受け取る（そして単純なカスタム入力ではないが、より抽象的な）より複雑なコンポーネントの場合、ほとんどの状況で推論するのが難しくなるため、 .sync使用はお勧めしません。

親は、子から受け取った値をどう処理するかを決定する必要があります。そのデータは、 .syncように暗黙的に変更されるべきではありません。

上記のvモデルアプローチではソルベンシーではなく、 .syncを使用することで利益を得る例を提供できますか？ それは抽象的な理論よりも議論のより良い基盤かもしれません。

ああ、どうして私はそれを逃したのですか？！ それは間違いなくOPにあり、これについてのいくつかのコメントの前の議論さえあります！ 今、私は少し愚かだと感じています。
v-modelをコンポーネントで使用できることをもう少し明確にするために、元の投稿を更新できますか？
@LinusBorg頭から離れて、コンポーネントのv-modelが機能しない場合は考えられません。 元の投稿でその部分を見逃しました。
複雑なオブジェクトコンポーネントの場合でも、コンポーネントをネストするだけです。 そして、これにより単一責任コンポーネントが強化されます。
それははるかに理にかなっています:)

@タワーフル

再： v-modelます。 つまり、 v-modelは（ある意味で）同期的ですが、コンポーネント間のデータフローは、ウォッチャーキュー（デモ）のために本質的に非同期です。 私はこれが多くの人々を混乱させるのを見てきました。 一方向のフローは、小道具が同期していないことをより明確にし、小道具が同期していることに依存しないように強制します（これはあなたが自分の道を騙そうとしているものです）。

Re：雑然としたメソッド。 単純なケースでは、いつでも@value-updated="value = $arguments[0]"実行できます。 複雑なケースでは、状態を調整して一貫性を保つことができるメソッドを用意することをお勧めします（たとえば、手動で更新をトリガーします）。 次のポイントへのセグウェイ。

Re：反応性から離れる。 私はこの声明に同意しません。 単純なケースでは、 value-updated="value = $arguments[0]"で更新された値を子供に取得させるために、魔法は必要ありません。

複雑なケースでは、 .sync小道具を使用すると、 watchを使用する必要がありますが、明示的なwatchは実際には反応性の一部ではありません。 これはエスケープハッチであり、計算されたものとして表現できない手動更新をトリガーします。 そして、計算された缶のように同期的に変化に反応することができないので、それは良いものではありません。 これが、 watch多用する場合、データの更新が伝播するのにいくつかの「ダニ」を必要とする場合がある理由です。 直接ネストされたnextTickに出くわしたことがあるなら、私が何を話しているのかご存知でしょう。

現在、 -updatedハンドラーはより優れたエスケープハッチを提供し、子が意図を表現した後に複雑なモデルの変更を同期的に（または同時に非同期的に）適用できるようにし、子が次のティックで更新された値を受け取るようにします（または受け取らないようにします）一貫性のない状態を受け取ります）。

@ yyx990803vuejs1で$ dispatchと$ broadcastのイベントがあったのと同じように、$

よりvuejs風の、これに沿った何か（「on」または「listen」）を感じます：

Vue.component('cart', {
  template: "#cart-template",
  data () {
    return {quantity : 0 }
  },
  watch: {
    'quantity': function (quantity, oldQuantity) {
      console.log('quantity changed from %s to %s', oldQuantity, quantity)

      bus.$emit('cart.quantity-changed', quantity)
    }
  }
});

new Vue({
  el: '.container',
  data : function () {
    return {
      quantity: 0
    };
  },
  on: {
    'cart.quantity-changed': function (newQuantity) {
      console.log('quantity change emitted');

      Vue.set(self, 'quantity', newQuantity);
    }
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

これは基本的に、自動的にグローバルバスに接続します。

イベントバスは、私たちが奨励したいパターンではありません。これは、一部のエッジケースでのみ役立ちます。 一般的に、vuexのようなストアパターンが好まれます。

バスの使用を容易にし、「公式にサポートされている」と感じるAPIを実装することは、間違ったシグナルになります。

例を見ると、両方のコンポーネントがアクセスするストアに数量を保存した場合、イベントは必須ではありません。 containerコンポーネントの計算されたプロパティは、自動的に更新されます。

vuexのような実際のストアソリューションを使用しない簡単なサンプルコード：

var store = {
  cart: {
    quantity: 0
  }
}
Vue.component('cart', {
  template: "#cart-template",
  data () {
    return store.cart
  },
});

new Vue({
  el: '.container',
  data : function () {
    return store.cart;
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

vue2の一般的な考え方は、自分を撃ちにくくすることだと思います
足元に。

11:24の日、2016年7月3日には、トルステンLünborg [email protected]
書きました：

イベントバスは私たちが奨励したいパターンではありません-それはただです
いくつかのエッジケースが役立ちます。 一般的に、vuexのようなストアパターンが好まれます。

バスの使用を容易にし、「公式に」感じるAPIを実装する
サポートされている」は間違った信号になります。

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/2873#issuecomment -230158828、またはミュート
スレッド
https://github.com/notifications/unsubscribe/AACoukCpCgYlDbVej_w_h4NEhQ-imYHBks5qR9QwgaJpZM4IedHC
。

@kharysharpe $emitは、子インスタンスでv-onしてリッスンすることを目的としています。 これには、インスタンスが使用されている場所の元のコンテキストを利用できるという追加の利点もあります。

<list-item v-for="(item, index) in items"
  :title="item.title"
  @remove="items.splice(index, 1)"
>
</list-item>

2.0リリースの日付はありますか？ 私はその変化にかなり興奮しています。 おめでとうございます！
Vue 2.0 + Reduxの使用を考えています。

@Sendoushi最終リリースの日付はまだありませんが、ベータ版は1週間以内になる可能性があります。 😄 Vuex 2.0はまた、一緒に開発されており、それが現在のvuexよりもはるかに簡単なAPIを備えています、だけでなく、はるかにきれいにReduxのよりVueのエコシステムに統合するだけでなく。

Vuex 2.0も一緒に開発されており、現在のvuexよりもはるかにシンプルなAPIを備えているだけでなく、reduxよりもはるかにうまくVueエコシステムに統合されます。

@chrisvfritz聞いて素晴らしいです！ 現在のAPIは少し過度で、不必要に複雑だといつも感じていました。 補償するためにこのようなことをしなければならないことになりました：

const mutations = {
  LOGIN (state) { state.loggedIn = true },
  LOGOUT (state) { state.loggedIn = false }
}

export const types = Object.keys(mutations)

// For now we dynamically generate all the actions like this.
// It's rare when anything more complicated is needed, but there
// is an example here:
// http://vuex.vuejs.org/en/actions.html
export const actions = types.reduce((o, el) => {
  var action = S(el.toLowerCase()).camelize().s
  o[action] = ({dispatch}, ...args) => dispatch(el, ...args)
  return o
}, {})

vue2とvuex2のロードマップについてはどうですか？それらを一緒にリリースする予定ですか、それとも前後にリリースする予定ですか？また、異なるバージョンの互換性についてはどうですか？

上記の質問に関連して、vue-routerのステータスはどうなっていますか？Vue 2のサポートはまもなく取得される予定ですか、それともVue 2のテストはルーターなしで実行する必要がありますか？

@gwilduそれらはある程度一緒にリリースされる可能性が高く、Vuex2.0はVue2.0のみをサポートします。 2.0より前のVuexは、Vue 1.xがサポートされなくなるまで、引き続きサポートされます。

@Uninen Vue Routerは、Vue 2.0がリリースされる前に、次にいくつかの愛を受け取ることになります。

nfo @ chrisvfritzを

@chrisvfritz @Uninen修正：Vuex2.0はVue1.xでも機能します。

vue-router次のメジャーバージョンはVue2.xのみをサポートします。

ランタイムのみのビルド：コンパイラーが含まれていないため、コンパイル手順でテンプレートを事前にコンパイルするか、手動でレンダリング関数を作成する必要があります。

vueify / vue-loaderと.vueファイルを使用せずにテンプレートをプリコンパイルする方法はありますか/ありますか？ そうでない場合は、コンポーネント内のtemplate:プロパティをrender関数に変換するためのbabelプラグインを用意することをお勧めしますか？

2.0にアップグレードした後も、非推奨の機能を引き続き使用できます。最初に2.0にアップグレードしてから、非推奨の機能をゆっくりと変更できますか？

elementDirectiveがなくなったので、ターミナルコンポーネントを作成することは可能ですか？

述べたように：

v-modelは初期インライン値を気にしなくなりました。 常にVueインスタンスデータを信頼できる情報源として扱います。

それを考慮してください

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value" />
  <label :for="_uid"><slot></slot></label>
</child-component>

カスタムコンポーネント間の配列のチェックボックスをどのように処理できますか？

_更新1：_
解決しました。 プロップtype="checkbox"を親コンポーネントの子コンポーネントに転送します。

<parent-component>
  <child-component type="checkbox" v-model="parentModel" value="apple"  />
  <child-component type="checkbox" v-model="parentModel" value="orange" />
  <child-component type="checkbox" v-model="parentModel" value="banana" />
</parent-component>

次に、 {props: [ 'value' ]}介してインライン値を取得できます。
changeイベントを親コンポーネントに発行して、値が変更されたことを通知します。

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value"
    @change="$emit('change', $event)"
  />
  <label :for="_uid"><slot></slot></label>
</child-component>

これは、コンパイラがtypeに従ってv-modelディレクティブをコンパイルするためです。 そして、コンパイラーはcheckedプロップを生成し、それにchangeイベントをバインドします。

_更新2：_
ただし、 v-modelがchecked属性を直接変更するため、 updatedライフサイクルフックはトリガーされません（つまり、 changeイベントを取得できません） v-modelの値を変更することにより、ネイティブhtmlチェックボックスコンポーネントの
それで、 @ yyx990803 、 v-model変更後にchangeイベントをトリガーできますか？

@ YunSun-CN問題を回避する唯一の方法は、値ala valに固有のプロパティを追加し、それを使用して実際の値を設定し、v-modelの入力に変更を加えることでした。 ' イベント。

@johnleider v-model動作をシミュレートするカスタムディレクティブを作成しました。
ちなみに、 type propをチェックするだけでなく、要素のtagNameもチェックする厳密な方法でモデルを生成する必要があります。 そうしないと、 type propを持つ別のカスタムコンポーネントがデフォルトのモデルの動作を上書きする可能性があります。

こんにちは。 リリース日を知っていますか？

@thanosalexanderまだ日付は決まっていません、

わかりました..私はこれで行きますそして..私は馬小屋へのステップが大きすぎるとは思わない！ ありがとうございます

ドキュメントはどうですか？ Vueが早期に採用された理由の1つはドキュメントであり、それがv2で今私を引き止めている唯一の理由です。 ドキュメントのフォローアップで問題が発生しましたが、間もなく終了する予定はありません。 おそらく私は内部で起こっていることをあまり無視しているのでしょう、なぜ質問を提起するのか:)

2.0でコンポーネントの切り替え以外に遷移モードを実装する計画はありますか？
https://github.com/vuejs/Discussion/issues/156

@ miljan-aleksic Docsは、2.0が正式にリリースされるときに準備が整います。 まだベータ版です。 ;）

それまでは、ここでドキュメントの進捗状況を確認できます（または投稿することもできます）

@aristidesflすでに完了しています。 🎉

@ miljan-aleksic @LinusBorgが述べたことにここでソースを読むこともできます。 ただし、執筆時点では、 beta.2での変更を反映するように完全に更新されておらず、重要なピアレビューがまだ行われておらず、他にもいくつかのマイナーなAPI変更が検討されていることに

また、優れたドキュメントがVueの重要な部分であることに同意します。 でもダン・アブラモフリアクトチームからは、私たちのドキュメントを愛しています。 😄それが、2.0ドキュメントが_さらに優れている_というのが私の個人的な目標の1つである理由です。 それまでの間...

2.0について早期に学びたい人には、利用可能な最新のリソースとして機能ユニットテストをお勧めします。

これは、ドキュメントを作成する際の私の主要なリソースの1つであり、Jasmineに精通している場合は、一般的に非常に読みやすくなっています。

@chrisvfritzに感謝し

onを使用するrender関数のcreateElementは、配列を処理していないようです（snabbdomのように）、呼び出された関数にデータを渡す方法はありますか？

たとえば、snabbdomでは使用できます

{on:{click: [function, dataToPass]}}

そして、 functionは最初の引数としてdataToPassを取得します。 しかし、これはvuejs 2 beta 2 Uncaught TypeError: arr[i] is not a functionではエラーになるようです。 on from create要素を使用してデータとイベントを渡す方法はありますか？

@dubcanada Vue 2.0でのイベント処理は、snabbdomのものとは異なります。関数を自分でカレーする必要があります。 配列構文は、複数のハンドラーを同じイベントにアタッチするだけです。

スロットのコンテンツをレンダリングするのではなく、文字列として取得しようとしています。 標準ノードでは簡単な回避策がありますが、Vnodeでは方法が見つかりませんでした。 回避策はありますか？

@ miljan-aleksicレンダリングして、 innerHTMLで要素のコンテンツを取得してから、cssでdisplay: noneで要素を非表示にしてみてください。

助けてくれてありがとう。 レンダリングすると、最終的な出力が異なります。 子のコンテンツをpreタグでラップし、HTMLをエンコードするコンポーネントを作成しています。

その場合、元の要素とは異なる要素で出力をレンダリングします。

テンプレートはコンテンツの書き方ではないことを強調しておきますが。 これは、コンテンツ自体ではなく、コンテンツの記述方法を説明する方法である必要があります。 テキストを文字列としてJSに（またはプロジェクト内の別の場所にあるリソースとして、特にユーザー入力の場合は）保存してから、子に小道具として渡すことをお勧めします。これにより、1000回の処理が可能になります。とにかく簡単です。

あなたは正しい@Kingdaroです。最善の方法は、概念を混同せず、シンプルに保つことです。 構文hihgligthigがあるのは良かったですが:)

v-onディレクティブを使用すると、 $arguments変数は使用できなくなります。 ここでは、その変更に関する参照はありません。 バグまたは参照がありませんか？

@ miljan-aleksicはargumentsます。

PHP開発者でなければなりません（私のように）...私はあなたがどのように感じているか知っています。 笑！

スコット

@私は@smolinari yyx990803、...と恥ずかし1になりました（笑）。 私は自分がすでにそれを試したと自分自身に信じさせました...私は十分ではなかったようです。 それは機能しています、ありがとう、そしてあなたの時間を無駄にして申し訳ありません。

別の「問題」についてチケットを開こうとしていましたが、それが正しいかどうかはもうわかりません... refすると、登録されたコンポーネントまたは要素がすぐに利用できないため、このようなものは機能しません。

<button ref="button"...></button>
<foo :connect="$refs.button"></foo>

Fooがレンダリングされている時点では、 $refs.buttonはまだ定義されていません。 Vue1では期待どおりに機能しています。 今回は何が足りないのですか？

DOM要素またはコンポーネントインスタンスを小道具として渡してはならないということを見逃しています...

なぜそれは悪い考えですか？ ボタン（トリガー）に接続したいドロップダウンコンポーネントがあるとしましょう。 どちらも独立したコンポーネントであり、クエリを介してそれらを接続する代わりに、参照を直接渡します。

@ miljan-aleksic状態を介してそれらを接続することはさらに良いです：

• オープン/クローズ状態は、共通の親で維持されます
• 親は状態を小道具としてドロップダウンに渡します
• 親はボタンのイベントをリッスンして状態を切り替えます

このようにして、ドロップダウンとボタンは完全に分離され、ボタンは他のタイプのコンポーネントを制御するために再利用でき、ドロップダウンは他のタイプの入力コンポーネントによって制御できます。

古い習慣を取り除くのは簡単ではありません。 私はjQueryのせいにするべきですか、それとも主に私を責めるべきですか？ ：D

あなたのアプローチ、エヴァンは正しいです。 ドロップダウンの統合がより面倒になることを意味する場合でも、私はそのように進みます。 親コンポーネントは、さまざまなイベントをリッスンする方法を知っている必要があるため、外部をクリックしたときにドロップダウンを開くだけでなく閉じることも、ドロップダウン自体は知らないことなどもあります。ドロップダウンが解決していた多くのイベントと回避策。

親コンポーネントは、さまざまなイベントをリッスンする方法を知っている必要があるため、外部をクリックしたときにドロップダウンを開くだけでなく閉じることも、ドロップダウン自体は知らないことなどもあります。ドロップダウンが解決していた多くのイベントと回避策。

それでもできますか？ ドロップダウンコンポーネントからaddEventListener('body', ... )を完全に実行して、外部クリックなどを登録できます。たとえば、ドロップダウンは、誰かが外部をクリックしたときに、親に対して「閉じる」イベントを発行するだけです。

うん、うん。 いくつかのコンポーネントをリファクタリングする時が来ました:)みんなありがとう！ 素晴らしいコミュニティ。

createElementコンポーネントにv-modelを適用するにはどうすればよいですか？ テンプレートコンパイラを使用して生成されたコードを調べましたが、それは多くのコードです。 ディレクティブに関するドキュメントがよくわかりませんでした。

デフォルトでは、コンパイル時ディレクティブはディレクティブを抽出し、ディレクティブは実行時に存在しません。 ディレクティブをランタイム定義でも処理する場合は、変換関数でtrueを返します。

@blocka render関数を使用している場合、組み込みディレクティブにアクセスできません。 同等のロジックを自分で処理する必要があります。 たとえば、 v-ifは単なる三項式であり、 v-forはarray.map()式です...そしてv-model （通常の<input>要素上） ）は、 valueバインディングとinputイベントリスナーに変換されます。

@ yyx990803それは私が考えたものです。 私はおそらくHOCでそれを処理することになります（私はすでに同じ方法で条件文を渡しています（私はこれを使用するますが）

vue 1では、vuexとreduxの2つの利点が述べられています。

1. vuexが状態を変更するため、パフォーマンスが向上します。これは、vueで最適に機能します（古い状態を置き換えると、「ダーティチェック」と同等のパフォーマンスが得られます）
2. Vuexは、vueアプリケーションにあることをより「認識」しています

仮想domを使用すると、1の一部またはすべてが軽減されますか？

@blockaはその一部を軽減しますが、全体的なパフォーマンスはReduxよりもはるかに優れています。

2.0で変更されたのは、反応性の粒度です。 比較してみましょう：

• Vue 1.xでは、反応性は非常にきめ細かくなっています。 すべてのディレクティブとすべてのテキストバインディングには、対応するウォッチャーがあります。 これにより、データが変更されたときにきめ細かい更新が行われますが、初期レンダリングでの依存関係追跡のオーバーヘッドが増え、メモリ使用量がわずかに高くなります。
• Reduxを使用すると、反応性に粒度がまったくありません。 何かが変更されるたびに、アプリ全体を再レンダリングする必要があります。 Reactでは、Reduxバインディングは接続されたコンテナーに対してある程度の最適化を行いますが、パフォーマンスを向上させるには、ユーザーはshouldComponentUpdateを広範囲に実装する必要があります。
• Vue 2.0では、反応性の粒度は中程度です。 各コンポーネントには、そのコンポーネントの依存関係を追跡する対応するウォッチャーがあります。 データが変更された場合、変更に依存するコンポーネントのみが仮想DOMを再レンダリングする必要があります。 これは基本的にReactの最良のシナリオですが、Vue2.0でそれを達成するために何もする必要はありません。

一般的に2.0では、（1.xと比較して）表示されます

• 小さなデータ変更のためのわずかに遅い（しかしそれでも非常に速い）更新
• 中規模から大規模のデータ変更に対するかなり高速な更新
• 大幅に高速な初期レンダリング

おい、
animated.cssでトランジションが機能しません。

<transition enterClass="fadeIn" leaveClass="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

誰かがアイデアを持っていますか？

あなたの小道具の名前は間違っています。

キャメルケースとケバブケースは2.0でも適用されます。

<transition enter-class="fadeIn" leave-class="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

@LinusBorg申し訳ありませんが、私はすでにそれを試しました。 ここに小さなフィドルがあります。 cssトランジションと名前タグを使用すると、正常に機能します。
https://jsfiddle.net/z0nyfba0/

コンポーネントでv-modelを使用する場合、コンポーネントはv-model使用される修飾子を認識できますか？

たとえば、 inputイベントを発行するコンポーネントがある場合、そのイベントがいつ発行されるかは、 lazy修飾子が使用されているかどうかによって異なります。

@fergaldoyle私はこれで少し遊んだのですが、入力イベントを手動でchangeイベントを入力にバインドする必要があります（例： https ：

@calebboyd

https://jsfiddle.net/Linusborg/z0nyfba0/1/

1. enter-active-classとleave-active-classを使用する必要があります
2. <router-view>要素にclass="animated"配置する必要があります。

@fergaldoyle 1.0のドキュメントによると、 lazy 、v-modelはinputではなくchangeに反応するだけだと思います。 これを使用して動作を変更し、 inputまたはchangeを発行して、 lazyが指定されているかどうかに応じて異なる結果を得ることができます。

簡単なv-for例で遊んでいる間、私は頭を悩ませてきました。 何らかの理由で、2.0のselect要素に対してvalueバインディングが機能していません： https ：

また、ドキュメントでは、 "i in 10"ようなv-for範囲は、1.0のように0ではなく1から始まることに注意してください。

@lauritzen

たとえば、単純なvで遊んでいる間、頭をかいてきました。 何らかの理由で、2.0の一部の要素で値のバインドが機能していません： https ：

私にとっては期待どおりに機能しているようですが、何が機能していないのですか？

公共サービスの案内

フォーラムまたはgitterでサポートの質問をすることをお勧めします。

この問題は、新しいAPIに関する議論に限定する必要があります。 ここでさまざまな質問のサポートを処理すると、手に負えなくなります。

ありがとう。

vm。$ getが非推奨になったのはなぜですか？
代わりにVue.getを使用しないのはなぜですか？
このような計算された表現を評価するのに非常に便利です
var exp = 'entity.type.name' // this is generated in runtime return vm.$get(exp)

@iagafonovこれが役立つシナリオは多くないため、コアの一部にするべきではありません。

いくつかのシナリオの1つに機能が必要な場合は、lodashなどを使用して同様の動作を非常に簡単に追加できます。

import get from 'lodash/get';
Vue.prototype.$get = get

//in any component
var value = this.$get(this.someObject,'some.path.to.value')

（もちろん、Vue.get（）のように「クラスメソッド」として追加することもできます。または、必要な場所にローカルにインポートすることもできます。選択してください）

@LinusBorg。 まず第一に、私はlodashまたはこのようなものを使用しません。
第二に、lodashの実装は遅いです。これは、実行時にエクスプレッション構造を深く掘り下げようとするためです。 vueは、スコープにバインドされた、（parseExpressionによって）新しく指定された関数に準拠します。
これは些細なことではなく、これを再実装することは非常に困難です。
もちろん、$ getコンパイル関数は毎回）。 たとえば、parseExressionがVue.utilのapiの一部であると便利です。

@iagafonov this.$getも実行時にパスを解析し、値を動的に取得する必要があります。 そうしないと、パスが存在しない場合にエラーが発生します。 また、ほとんどの場合、パフォーマンスの違いはごくわずかです。 lodashが必要ない場合は、他にもたくさんのパス検索ライブラリがあります。 それはもはやVueの懸念の一部ではありません。

現在非推奨になっているparam属性の代替案は何ですか？

ディレクティブのパラメータについて話しているのですか？ 次に、vnodeオブジェクト内のすべてのバインドされた属性を見つけることができます

<button v-test="123" color="red" type="button">click me</button>

bind (el, binding, vnode) {
 // vnode.data.attrs -> { color: 'red' }
}

@sqal 、これは私の質問への回答ですか？ もしそうなら、私は怠惰、数、デバウンスなどのパラメータ属性について話している。 たとえば、2.0より前では、これを<input type="text" v-model="msg" number> （数値はここではparam属性です）。 param属性を使用せずに同じ結果を得るにはどうすればよいですか？

@ p-adams投稿で言及されています-これらは修飾子になりました<input v-model.number="msg">

Vue 2.0では、小道具が変更されると、レンダリング関数が常に呼び出されるので、2.0で再レンダリングするかどうかを決定するためにshouldComponentUpdateがサポートされるのではないかと思います。

@ yyx990803わかりました、今はThe lazy and number params are now modifiers投稿に表示されています。

@HeChenTaoEvanはこれについてここで少し説明しましたhttps://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.pc5c8urbv

@HeChenTaoレンダリング関数は、必要な場合にのみ「常に」呼び出されるわけではありません。

• Vueは反応性があるため、 shouldComponentUpdateは必要ありません。
• コンポーネントで使用されるリアクティブデータが変更されると、レンダリング機能、vdo​​m差分などがトリガーされます。
• ただし、そのデータのいずれも変更されていない場合は、更新しないことが必須であり、レンダリング関数は呼び出されません。

mobxと反応して同じことを行うことができます。 shouldComponentUpdateを実装する必要はないと確信しています。 ただし、vueと同様に、mobxは可変状態を要求します。 何らかの理由で、不変状態の概念に同意した場合。 その場合、reactはshouldComponentUpdateあなたの背中を持っています。

つまり、誰かが不変の状態を主張した場合、vueは適切に一致しないということですか？

機能コンポーネントのコンテキスト引数には、 childrenとslotsます。 children()とslots().defaultがまったく同じであることを知っていると、少し混乱します。 正しいアプローチは何だろうと思います。 おそらくスロットとしての「子供」は怠惰ですが、それでも同じ動作を得る2つの異なる方法をサポートするのはなぜですか？

機能コンポーネントは単なる機能であるため、子はありません。 私見、子供たちは非推奨にされるべきであり、怠惰ではないようにスロットを維持するだけです。

@blocka mobxに反応してリアクティブデータを実装できます、本当です。 しかし、反応性はVueの機能の中核です。 ですから、それが自分のお茶ではない場合、その人は間違ったパーティーにいます。

@ miljan-aleksic childrenは生です（どのスロットに入る必要があるかに関係なく、すべてのノードを取得します）。 slotsは、着信する子のslot名に基づいて解決されます。

ありがとう@ yyx990803。 たぶん、これについての詳細はドキュメントで混乱を避けるでしょう、@ chrisvfritz。

@ miljan-aleksicメモを追加します。 👍

フィルタに関しては、計算されたプロパティを使用することは十分に簡単に思えますが、vモデルでフィルタを使用する場合の処理​​方法。 入力フィールドに入力して名前のリストをフィルタリングしたい場合、2.0でこれをどのように行うことができますか？

データフィールド/計算されたプロパティがテンプレートで使用されていないときにVueに警告させることについての考えはありますか？ ここにはいくつかの制限があると思いますが、不要な店舗の輸入品を不要な場所に引き出す余裕がある場所を知っておくと非常に役立ちます。

@ yyx990803 、コンポーネントプロトタイプへの$context参照の設定についてどう思いますか？ $parentまたは$rootの場合と同じように、現在$vnodeオブジェクトを介してのみ利用できるコンテキストに自分自身が頻繁にアクセスしていることに気付きました。

実際、それはコンテキストにアクセスするための信頼できる方法ではないようです。 どのようにすべきですか？

@ miljan-aleksicコンテキストに頻繁にアクセスするユースケースを共有できますか？

@Kingdaroそのための問題を開くことができますか？ 実現可能であればいいですね。

@ p-adams Array.prototype.filter計算されたプロパティを引き続き使用できます。

@chrisvfritz 、基本的には、たとえば子が期待しているコンテキストで変数を設定するなどの回避策。 または、Vue自体が行うよりも前にコンポーネントへの参照を設定します。

私はすべての人に共通しているわけではないことに同意しますが、少なくともコンポーネント内でそれにアクセスするための信頼できる方法があるはずです。 $ vnodeは、テンプレートを使用するときにコンポーネントがマウントされるまで存在しません（少なくともこれまでのところ私の結論）。

適切な方法でアクセスする方法を知っていると満足します。

$contextが役立つもう1つの状況は、あるコンポーネントを別のコンポーネントのルートとして再利用する場合です。

<template>
  <Foo>
    <child/>
  </Foo>
</template>
<script>
{ name: 'Bar' ... }
</script>

この例では、 child.$parentはBarの代わりにコンポーネントFooを返します。これは正しいですが、親と子が相互に依存している場合、それらの間の直接通信はコンテキストを介して行うことができます。

@ miljan-aleksicこれは@ yyx990803に任せます。 私はとのようなものだと思います$parentするために達し、 $contextおそらく時間の間違った方法99.9％になりますし、私はおそらくそれを使用しないと思います。

v-showとトランジションの状況があります。 このシナリオでは、デフォルトでCSSに「display：none」というモーダルがあります。 v-showと組み合わせると、ディレクティブがdisplayプロパティを削除するため、表示されなくなり、CSSプロパティが保持されます。 CSS（プロジェクト要件）を変更できず、Vueトランジションが特にCSSに依存しているように見えるため、カスタムディレクティブを使用できません。

私は今、v-showの直後に評価するディレクティブがdisplayプロパティをblockに設定できると考えています。 それを試す必要がありますが、とにかく、表示をブロックまたはインラインブロックに設定できるようにv-showに修飾子を追加することをお勧めします。 ちょっとした考え。

@chrisvfritz 、機能コンポーネントの場合、親参照はスロットとして使用されている直接の親ではなく、代わりにコンテキストコンポーネントであると予想されますか？

2.0.0-beta7で「<」（および場合によっては他のHTMLに依存する文字）が含まれていると、テンプレートのコンパイルが失敗します。

https://jsfiddle.net/x0r59ur1/

これは1.0.26で機能しました。

「<」を「<」でエスケープすると、問題が解決します。

@GlurG 「<」を適切にエスケープすることが期待されます。

@ yyx990803 、同じタイプのコンポーネントのリストでトランジションを使用してその状態を維持したい場合、どのようにすればよいですか？ ドキュメントに続いて、私はコンポーネントが異なる場合にのみどのように見えるかを確認します。

タブコンポーネントと言って、そのアイテムを遷移させましょう。 方法が見つかりません:(

<tabs>
  <transition>
    <tabs-item>Content 1</tabs-item>
    <tabs-item>Content 2</tabs-item>
    <tabs-item>Content 3</tabs-item>
  <transition>
</tabs>

@ miljan-aleksic <transition>は単一要素専用です。 複数のアイテムには<transition-group>が必要です。

@ yyx990803 、それも試しましたが、それを達成する方法がわかりません。 遷移グループは要素を追加/削除することで機能しますが、そうしている間、コンポーネントは再び初期化され、状態が失われます。 タブの概念のほかに、一度に1つのコンポーネントのみを表示することであり、正確にはリストではありません:)

@ yyx990803 、 ありがとうございますが、解決策は明らかではありません。 トランジションがどのように適用されるかを知っていますが、私が理解できないのは、トランジションされたコンポーネントをkeep-aliveする方法です。

コンポーネントが毎回どのように作成されるかについてのjsfiddleの例を使用して、わかりやすくするために新しい問題を作成しました。

@ yyx990803 、キープアライブ機能を改善していただきありがとうございます。期待どおりに機能するようになりました。

あなたは文字通り私の人生を変えています。あなたの製品と労働倫理によって、私は長い間待機していた製品を学び、構築し、提供することができます。 シンプルなアプローチで、誰もがハイテクを利用して構築できます。 それ以上に、私は永遠に感謝しています。

@ miljan-aleksicPatreonキャンペーンのウィンクウィンクがあります。

あなたは@phananが何であるかを知ってい

readyライフサイクルフックは廃止され、 mountedが優先されます。 ただし、変更ログによると、マウントが呼び出される前にコンポーネントがレンダリングされるという保証はありません。 これにより、コンポーネントの初期化後に特定のjqueryコンポーネント（selectizeなど）を初期化するときに散発的なエラーが発生します。 代わりにどのライフサイクルフックを使用する必要がありますか？ 「準備完了」フックは次のようにエミュレートできますか？

function mounted() {
  Vue.nextTick(() => {
    //...
  });
}

@GlurGはい、動作します。 ちなみに、それは多くの場合1.0でready'()必需品でもありました。

とにかくこれにフックがない理由はありますか？ 私もしました
これを横切って... 1.0でも、そしてrafでループするようなものに頼りました
ドームなどにあるか確認してください。
2016年8月10日18:26、「ThorstenLünborg」 [email protected]
書きました：

@GlurG https://github.com/GlurGはい、動作します。 ところで、
多くの場合、1.0ではready '（）が必要でした。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/2873#issuecomment -238903012、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AACounAoI8p65soUUrbdaiwteDXKgMGJks5qee25gaJpZM4IedHC
。

レンダリング関数を使用する場合、コアディレクティブは無視されます。これは合理的です。 ただし、IE9の回避策があり、おそらく他のエッジケースの問題を解決するv-modelように、プレーンjsを使用して再現するのはそれほど簡単ではないものもあります。

代わりにテンプレートを使用することを再検討しますが、それは不可能であるか、状況によっては最良のオプションです。 ドキュメントは、このトピックに関するより多くのガイダンスを確実に提供する可能性があります。さらに、これらの一般的な状況を解決し、テンプレートを見逃さないようにするために、レンダリング関数を操作するときにヘルパーを用意することをお勧めします。

@ miljan-aleksic申し訳ありませんが、コメントはv-showまたはカスタムディレクティブでのみ機能することに気付いたので削除しました。v-modelの場合は、入力/変更リスナーを追加してデータを手動で更新する必要があります。

新しいactivatedルートがアクティブ/マウントすることを解雇されたときに呼び出されることになったフックrouter-view ？ 現在、この動作は見られません。

@wpraterいいえ、それは<keep-alive>のみ関連しており、他には何もありません。

@ yyx990803ルータービューをキープアライブでラップしていますが、前のビューに戻るときにフックが見つからないようです。 mountedもactivatedも呼び出されません。 domがレンダリングされていることを確認する必要があります。

@wpraterは、無関係な質問にこのスレッドを使用しないでください。 バグがある場合は、対応するリポジトリで問題を再現してファイルしてください。

Vue JSXはオブジェクト拡散演算子をサポートしていますか？ 試しましたが、うまくいきません。

それは機能し、 @ yyx990803はそれを機能させるために多大な努力を払いました。

私はこれを<Component {...{ props } }></Component>しており、文書化されているとおりに機能します。

@blockaありがとう！ プロパティ名propsは必要ないと思いました😂

@ yyx990803
componentsオプションは配列型をサポートしていませんが、1.xでは機能します。

例えば

var Parent = Vue.extend({
  name: 'parent',
  template: '<div><slot></slot></div>'
})

var Child = Vue.extend({
  name: 'child',
  template: '<span>hello</span>'
})

new Vue({
  el: '#app',

  components: [
    Parent,
    Child
  ],

  replace: false,

  template: '<parent><child></child></parent>'
})

バグですか？

@ QingWei-Li正式に文書化された機能ではなかったため、これらはサポートされなくなりました。 その理由は、ES2015ではcomponents: { Parent, Child }書くことができるからです。

ちょっとした提案、
v-foreachを使用し、範囲にはv-forを使用する、通常の配列反復の可能性はありますか。

これは、phpから来たユーザーにとってより意味があり、JQの.eachまたはJSのforeachと一致します。

@ ctf0私たちはRCステージにあり、APIはもう変更されません。 また、同じことを行うための代替構文も紹介しません。

v-for="item in items"の精神的なオーバーヘッドは、それを正当化するほど重要ではないと思います。

この新しいバージョンでは、このケースを処理します。

古典的なテキスト入力を使用し、人間の形式（たとえば、「2016年7月10日」など）で日付を表示するカレンダーコンポーネント（セマンティックUIから取得）があります。 v1.0では、双方向フィルターを使用してその文字列を適切な日付に変換し、オブジェクトデータを直接送信できるようにしました。 しかし、フィルターはv-modelで機能しなくなったので、v2.0で同じことを行うにはどうすればよいですか？

ありがとう

@shadowRRいくつかのコードを見ることができますか？

@ p-adamsもちろんです。 どうぞ。

まず、私のカレンダー入力用のvモデルで使用されているフィルター。 唯一の目的は、値が変更されたときに、適切な日付タイプをデータに書き込むことです（postgresdate）。

Vue.filter( 'formatDate', {
        read( date ) {
            return date;
        },
        write( date ) {
            if( !date ) return null;
            return moment( date, 'D MMMM YYYY' ).format( 'YYYY-MM-DD' );
        }
    } );

そして、私はあなたが私のコンポーネントでこのようにそれを使用しますか（入力には人間が読める形式で私の日付を返すカレンダーシステムがあります）

<div class="required field">
        <label>Start date</label>
         <div class="ui calendar">
                 <div class="ui input left icon">
                      <i class="calendar icon"></i>
                      <input v-model="section.start | formatDate" type="text">
                 </div>
         </div>
</div>

@ yyx990803の投稿をここで読むことをお勧めします： https ： v-model双方向フィルターについて説明しています。 また、ここでこのような質問をする方が良いかもしれません： http ：

私はあなたが話している投稿を逃しました、それを見るつもりです、ありがとう;）

こんにちは、
新しいライフサイクルフックには疑問があります。
マウント時にイベントハンドラーを登録し、アンマウントする前に登録を解除する場合、どのように機能させる必要がありますか？ 作成されたフックとbeforeDestroyフックにチェックとロジックを追加しますか？
Vue 1.xでは、取り付けられたフックと取り外されたフックを使用します。
しかし、2.0にはマウントされたフックがありますが、アンマウントされたフックはありません。 少し対応していないように感じます。
アンマウントフックが提供されていない理由はありますか？

@ f15gdsy mountedはdestroyed対応します。 2.0にはattached / detatchedカウンターパーツはありません。自分で内部チェックを行う必要があります。 イベントがin-dom / off-domを気にしない場合は、 mountedとbeforeDestroyが適切な場所です。

カスタムコンポーネントで使用すると、v-onはそのコンポーネントから送信されたカスタムイベントのみをリッスンするようになりました。 （DOMイベントをリッスンしなくなりました）

ここでいくつかの投稿を見逃したかもしれませんが、この背後にある設計上の決定は何ですか？
これにより、コンポーネントでの単純なクリックイベントのバインドが非常に冗長になります。

1.0：

<foo @click="bar"></foo>

2.0：

<div @click=bar>
  <foo></foo>
<div>

@fnlctrl 、ネイティブ修飾子@click.native="bar"ます。

@ miljan-aleksicありがとうございました！ この問題では、この修飾子をDirectives -> v-on -> modifiersに追加する必要があると思います

サーバーとしてKoa（1.xまたは2.x）を使用できますか？ Koaのvue-server-renderer問題はありますか？

@ yyx990803

import Vue from 'vue'

Vue.component('expanding', {
  functional: true,
  render (createElement, { children }) {
    const data = {
      props: {
        name: 'expanding',
      },
      on: {
        beforeEnter ($el) {
          $el.classList.add('collapse')
          console.log('beforeEnter')
        },
        enter ($el) {
          $el.classList.remove('collapse')
          $el.classList.add('collapsing')
          $el.style.height = `${$el.scrollHeight}px`
          console.log('enter')
        },
        afterEnter ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse', 'in')
          console.log('afterEnter')
        },
        beforeLeave ($el) {
          $el.classList.add('collapsing')
          $el.classList.remove('collapse', 'in')
          $el.style.height = 0
          console.log('beforeLeave')
        },
        leave ($el) {
          console.log('leave')
        },
        afterLeave ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse')
          $el.style.display = 'none'
          console.log('afterLeave')
        }
      }
    }
    return createElement('transition', data, children)
  }
})

        <a href="#" :aria-expanded="showItem ? 'true' : 'false'" @click="showItem = !showItem">
          <span class="icon is-small"><i class="fa fa-table"></i></span>
          Tables
          <span class="icon is-small is-angle"><i class="fa fa-angle-down"></i></span>
        </a>
        <expanding appear="true">
          <ul v-show="showItem">
            <li>
              <router-link to="/tables/basic">Basic</router-link>
            </li>
            <li>
              <router-link to="/tables/handsontable">Handsontable</router-link>
            </li>
          </ul>
        </expanding>

エンターフックを呼び出さないのはなぜですか？

@fundonフォーラムまたはgitterチャットで質問する必要があります

このスレッドをロックする理由：

1. 現在、RCでAPIがフリーズしているため、このドキュメントは更新されません。
2. あまりにも多くの人がこれを一般的なFAQスレッドとして使用していますが、これは目的ではありません。

バグがある場合は、問題報告ガイドに従って別の問題を開いてください。質問がある場合は、フォーラムまたはGitterを使用してください。

更新：2.0での変更のより明確で詳細なリストについては、新しい移行ガイドを参照して