vueで出会った穴
1528 ワード
1つはeventHubのピットです–繰り返しリスニングの問題:ソリューションリスニングの前にoffを落とす
2ルーティングのピット–replaceを付けないと2つのページがジャンプし、親ページに正常に戻ることができません.
3 vuejsはdata中の配列のオリジナルメソッドをカプセル化しているので、配列を変更するとビューの更新をトリガーできますが、以下の2つの場合はビューの更新をトリガーできません.
ソリューション第1のvueにはsetメソッドvmが提供する.items. set(0,{title:‘title’})またはvm.$set(‘items[0]’,{title: ‘title’})
もう1つのリストをレンダリングするときのパフォーマンスのテクニックは、配列自体に一意の識別idが付いている場合です.
itmes: [ {_id: 1,title: ‘title1’} {_id: 2,title: ‘title2’} {_id: 3,title: ‘title3’} ]
レンダリング時にtrace-byで配列に一意の識別子を設定すると、vuejsはレンダリング中に既存のオブジェクトの役割ドメインとdom要素をできるだけ繰り返します.は現在、key=’id’、すなわちbind を使用するようにアップグレードされている.
4 v-textパラメータはstringであり、要素のtextContentを更新する役割を果たす.{{}}テキスト補間自体もこれを行うが,v-textの利点は,未コンパイル前のフラッシュ問題を回避できることである.
ライフサイクルbeforeMountの間に{msg}}を直接使用すると,現在のmsgデータはまだ{msg}}にコンパイルされておらず,ユーザは一瞬の{msg}}を見ることができる.
there is a messageにフラッシュしてv-textを使うとこの問題はありません
5 v-elとv-ref
v-elコマンドはdom要素にインデックスを登録し、DOM要素に直接アクセスできます.構文的には、所属するインスタンスの$els属性で呼び出すことができます.たとえば
there is a el demo
vm.$els.demo.innerText//-> there is a el demo
HTMLでは大文字と小文字を区別しないため、v-elではラクダ式のネーミングを使用すると自動的に小文字に変わりますが、中線を使用して大文字のアルファベットを接続できます.
there is a camelcase
もしあなたがこのように書くならば、持つ時ただ
vm.$els.camelcase.innerText:小文字で持つ
中線で線を引くと
there is a camelcase
これでまたお持ちになると、お気に入りのアルパカ式が便利に使えます
vm.$els.camelCase.innerText
はい、v-elを紹介しました.実はv-refはそれと似ています.v-refがサブアセンブリに作用しているだけです.
2ルーティングのピット–replaceを付けないと2つのページがジャンプし、親ページに正常に戻ることができません.
3 vuejsはdata中の配列のオリジナルメソッドをカプセル化しているので、配列を変更するとビューの更新をトリガーできますが、以下の2つの場合はビューの更新をトリガーできません.
1 , vm.items[0] = {title: 'title'}
2 , vm.items.length = 0
ソリューション第1のvueにはsetメソッドvmが提供する.items. set(0,{title:‘title’})またはvm.$set(‘items[0]’,{title: ‘title’})
もう1つのリストをレンダリングするときのパフォーマンスのテクニックは、配列自体に一意の識別idが付いている場合です.
itmes: [ {_id: 1,title: ‘title1’} {_id: 2,title: ‘title2’} {_id: 3,title: ‘title3’} ]
レンダリング時にtrace-byで配列に一意の識別子を設定すると、vuejsはレンダリング中に既存のオブジェクトの役割ドメインとdom要素をできるだけ繰り返します.
4 v-textパラメータはstringであり、要素のtextContentを更新する役割を果たす.{{}}テキスト補間自体もこれを行うが,v-textの利点は,未コンパイル前のフラッシュ問題を回避できることである.
ライフサイクルbeforeMountの間に{msg}}を直接使用すると,現在のmsgデータはまだ{msg}}にコンパイルされておらず,ユーザは一瞬の{msg}}を見ることができる.
there is a messageにフラッシュしてv-textを使うとこの問題はありません
5 v-elとv-ref
v-elコマンドはdom要素にインデックスを登録し、DOM要素に直接アクセスできます.構文的には、所属するインスタンスの$els属性で呼び出すことができます.たとえば
there is a el demo
vm.$els.demo.innerText//-> there is a el demo
HTMLでは大文字と小文字を区別しないため、v-elではラクダ式のネーミングを使用すると自動的に小文字に変わりますが、中線を使用して大文字のアルファベットを接続できます.
there is a camelcase
もしあなたがこのように書くならば、持つ時ただ
vm.$els.camelcase.innerText:小文字で持つ
中線で線を引くと
there is a camelcase
これでまたお持ちになると、お気に入りのアルパカ式が便利に使えます
vm.$els.camelCase.innerText
はい、v-elを紹介しました.実はv-refはそれと似ています.v-refがサブアセンブリに作用しているだけです.