Vueインタビュアーに関するよくある質問1

1.ボタンをクリックすると、データに動的に追加されたメンバーが応答データであるかどうか、そうでない場合、新しいメンバーが応答データとして設定されている場合の内部原則は何ですか。

let vm = new Vue({
    el: '#el'
    data: {
    o: 'object',
    dog: {}
    },
    method: {
        clickHandler () {
            // 该 name 属性是否是响应式的
            this.dog.name = 'Trump'
        }
    }
})

まず第一に、name属性は応答データではありません。

1. vue2.xは、内部データが監視のために）（Object.definePropertyのgetterメソッドとsetterメソッドを使用しますが、データが応答しないように、新しいプロパティ名は、getterおよびsetterメソッドを持っていません。ので
、あなたがそれを設定したい場合レスポンシブ、それはより簡単です

方法1：次のコードのようにピット位置を予約します。

let vm = new Vue({
    el: '#el'
    data: {
    o: 'object',
    dog: {
        name:''
    }
    },
    method: {
        clickHandler () {
            // 该 name 属性是否是响应式的
            this.dog.name = 'Trump'
        }
    }
})

理由：初期化時にすでに存在するプロパティは、VueのObject.defineProperty（）メソッドによって監視されるため、プロパティにはgetterメソッドとsetterメソッドがあり、データは応答します。

方法2：
Vueの公式ウェブサイトがアイデアの解決策を提供します。Vue.set（）を
呼び出すとデータ応答を実現できます。呼び出し方法：Vue.set（target、key、value）

ターゲット：変更するデータソース（オブジェクトまたは配列の場合があります）
キー：変更する特定のデータ
値：再割り当てされた値

let vm = new Vue({
        el: '#app',
        data: {
            msg: 'object',
            dog: {}
        },
        method: {
            clickHandler() {
                // 该 name 属性是否是响应式的
                this.$set(this.data.dog, name, 'Trump')
            }
        }
    })

2.Diffアルゴリズムの実行プロセスについて簡単に説明してください

diffのプロセスは、patchという名前の関数を呼び出し、古いノードと新しいノードを比較し、比較しながら実際のDOMにパッチを適用することです。
差分アルゴリズムを使用して新しいノードと古いノードを比較する場合、比較は同じレベルでのみ実行され、レベル間で比較されることはありません。
データが変更されると、setメソッドはDep.notifyを呼び出してすべてのサブスクライバーにWatcherを通知し、サブスクライバーはpatchを呼び出して実際のDOMにパッチを適用します

説明：

パッチ関数は、新しいノードと前の古いノードをそれぞれ表す2つのパラメーターoldVnodeとVnodeを受け取ります。このパッチ関数は、oldVnodeとvnodeが同じかどうか、つまり関数sameVnode（oldVnode、vnode）を比較します。この関数の戻り結果によると、次の2つのケースに分けられます。

true：patchVnodeを実行します
false：oldVnodeをvnodeに置き換えます

patchVnode関数の機能

1.elと呼ばれる対応する実際のDOMを見つけます

2.vnodeとoldVnodeが同じオブジェクトを指しているかどうかを判別します。
そうである場合は、直接戻ります（終了）。

3.テキストノードがあり、等しくないことを確認してから、elのテキストノードをvnodeのテキストノードに設定します。

4. oldVnodeに子ノードがあるがvnodeにはないかどうかを判断し、elの子ノードを削除します。

5. oldVnodeには子ノードがないが、vnodeには子ノードがあると判断し、実現後にvnodeの子ノードをelに追加します。

6.両方に子ノードがあると判断し、updateChildren関数を実行して子ノードを比較します。

vue-routerで一般的に使用されるハッシュおよび履歴ルーティングモードの実装原理

hash：ルーティングのハッシュ（アンカー）モードは、実際にはウィンドウを使用してonhashchangeイベントを監視します。つまり、URLのハッシュ値（＃の後ろの値）が変更された場合、フロントエンドはそれを監視して実行できます。（何かをする）、フロントエンドがhttpリクエストを開始しなくても、対応するページのコードブロックを見つけて、オンデマンドでロードできるようにします。

ハッシュはwindow.location.hashから読み取ることができます

履歴モード：pushState || replaceState（+ server）およびpopStateイベントを使用して状態の変化を監視します

pushState：ブラウザはサーバーにデータを要求せず、URLアドレスを直接変更します。これは、ハッシュの偽装バージョンと同様に理解できますが、ハッシュとは異なり、ブラウザはpushStateの履歴を記録し、次を使用できます。ブラウザの順方向および逆方向機能
replaceState：pushStateとは異なり、replaceStateは対応する履歴のみを変更します