vue再構成技術の詳細な解釈

この記事では主に Vue プロジェクトの再構築技術の要点と概要を紹介し、参考にしていきます。

はじめに

最近忙しくてブログの更新が滞ってしまいました。今日は忙しいスケジュールの合間に、最近の Vue プロジェクトの再構築に関する技術的なポイントを簡単にまとめたいと思います。

vue データは更新されますが、ビューは更新されません

この問題はよく発生します。通常、vue データが割り当てられると、vue データは変更されますが、ビューは更新されません。これはプロジェクト再構築の技術的なポイントではありません。vue2.0 の通常のソリューションを共有しましょう。

解決策は次のとおりです:

1. vue.set を通じて値を割り当てます

Vue.set(数据源, key, newValue)

2. Array.prototype.splice メソッドを通じて

data source.splice(indexOfItem, 1, newValue) を変更します。データの長さ

data source.splice(newLength)

4. 変異メソッド

Vue.js は、観察された配列の変異メソッドをラップするため、ビューの更新をトリガーできます。ラップされたメソッドは次のとおりです:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

prop object array application

JavaScript では、オブジェクトと配列は参照型であり、同じメモリ空間を指します。prop がオブジェクトまたは配列の場合、子コンポーネント内で変更すると、コンポーネントの状態。これを利用して、子コンポーネントの prop 配列またはオブジェクトを変更すると、親コンポーネントと prop 内のデータが適用されるすべての場所が変更されます。以前にjsのディープコピーとシャローコピーについての記事を書きましたので、興味のある方はご覧ください。

ケースは次のとおりです:

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

itemData に適用されるすべての場所が変更されます。

このようにプロップを変更する場合、Vue はコンソールに警告を出しません。プロップを完全に変更または割り当てた場合、コンソールに警告が表示されます。公式ソリューションの引用は次のとおりです:

1. ローカル変数を定義し、prop の値で初期化します:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

2. 計算されたプロパティを定義し、prop の値を処理して返します:

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

v-modelいくつかの落とし穴

実際、v-model と sync は以前の記事で紹介した構文糖衣であり、公式 Web サイトでも同様のケースを見つけることができます。

v-model データは、未定義の場合にエラーを報告しないことがあります。そのため、v-model は未定義にできないことに注意してください。未定義にしないと、説明できない問題が発生します。

リファクタリング - 動的コンポーネントの作成

わずかな違いがあるだけの類似したコンポーネントが多数ある場合がありますが、そのような類似したコンポーネントを構成ファイルに記述し、コンポーネントを動的に作成および参照できます

方法 1: コンポーネントとコンポーネントを使用します。は一緒です

予約された要素を使用し、それらの is プロパティを動的にバインドすることで、同じマウント ポイント上の複数のコンポーネントを動的に切り替えることができます:

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

方法 2: render メソッドの作成を通じて

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

bi.chart.components[_type ]["attr"] これは設定ファイル内で動的に設定され、type をクリックすると変更され、さまざまな type の attr 属性が取得されます。

パブリック属性の抽出

私たちのプロジェクトでは、多くの状態やデータをよく使用します。多くのパブリック データを抽出して、後でこのデータ オブジェクトの変更を監視できます。データを保存または取得します。

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

上記の深度モニタリングを使用できます。初期化中にすぐに実行する必要がある場合は、即時実行監視を使用できます。

依存関係の動的読み込みが必要

同期機能を使用して、コード内で依存関係を動的に読み込むことができます。たとえば、以下の echart テーマでは、クリックして切り替えるときに動的に読み込むことができます。

require("echarts/theme/"+ data.theme);

インポートの読み込みはヘッドに配置する必要があります。初期化中に、インポートを使用してデフォルトのテーマを読み込むことができます。

上記は私があなたのためにまとめたものです。

関連記事:

angularjs でデフォルトで選択されているラジオ ボタンの value メソッドを取得する (詳細なチュートリアル)

angularJS でラジオを使用して、2 つのオプションのいずれかの使用を実装する (詳細なチュートリアル)

vue で cli を包括的に解釈する (詳細なチュートリアル)

vue-cli 3.0 の新機能を詳しく説明する (詳細なチュートリアル)

以上がvue再構成技術の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。