vue面接知識点要約

1.v-forとv-ifの優先度

明らかにv-forはv-iより優先的に解析される(ソースコードははっきりしている)

同時に現れると、レンダリングのたびにループを実行して条件を判断し、いずれにしてもループは避けられず、パフォーマンスを浪費する

.

このようなことを回避するには、外層にtemplateをネストし、この層でv-if判定を行い、内部でv-forサイクル

を行う.
2.コンポーネント間の伝達値
3つのコンポーネントの値伝達方式
2.1.1親コンポーネントから子コンポーネントへの値の伝達

1.親コンポーネントがサブコンポーネントを呼び出すときにダイナミックプロパティ

をバインドする

2.サブコンポーネントにpropsがある親コンポーネントから伝達されたデータ

を受信する

3.属性、メソッド、インスタンスを渡すことができ、サブアセンブリで

を直接使用することができます.
2.1.2サブコンポーネントが親コンポーネントの属性とメソッドをアクティブに取得する
サブアセンブリはthis.$parent. ``this.$parent. を直接通過する
2.2サブアセンブリから親アセンブリに値を渡す
2.2.1親コンポーネントが子コンポーネントのデータと方法を積極的に取得する

サブコンポーネントを呼び出すときにref

を定義する.

親アセンブリ内でthis.$refs.header. this.$refs.header.

を通過する
2.2.2サブアセンブリカスタムイベントの親への値の伝達
サブアセンブリ:

this. $emit("       " ,     ) ;

親コンポーネント:

<Header @childInput= ' getVal '></Header>
methods:{
getVal(msg){
/ /msg  ，
        
}
}

サブアセンブリ

<template>
  <div>
           : {{this.$parent.msg}}
            <!--              -->
    <input type="button" value="    " @click="childClick">
  </div>
</template>

<script>
  export default {
    props:{
      msg:String
    },
    data () {
      return {
        childValue:"         "
      }
    },
    methods: {
      childClick () {
        this.$emit('childClick',this.childValue)
      }
    }
  }
</script>

親コンポーネント

<template>
  <div>
         
    <!--     -->
    <!-- <child :msg="name"></child> -->
     <!--           on           -->
     <!--        ,               -->
     <!--              $emit    -->
    <child @childClick="childByValue"></child>
    
    {{name}}

  </div>
</template>

<script>
import Child from './Child'
  export default {
    data() {
      return {
        name:"pz",
        msg:"     "
      }
    },
    components: {
      child:Child
    },
    methods: {
      childByValue(childValue) {
        // childValue          
        this.name = childValue
      }
    }
  }
</script>

2.3兄弟コンポーネント間の伝達値
(親子コンポーネント間で値を転送するのではなく、中間倉庫として値を転送する共通のインスタンスファイルbus.jsを定義する必要があります.そうしないと、ルーティングコンポーネント間で値を転送する効果はありません.)公共bus.js

import Vue from 'vue'
export default new Vue()

コンポーネントA:

<template>
  <div>
    A  :
    <span>{{elementValue}}</span>
    <input type="button" value="    " @click="elementByValue">
  </div>
</template>
<script>
  //      bug，          
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

コンポーネントB:

<template>
      <div>
        B  :
        <input type="button" value="    " @click="getData">
        <span>{{name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0
          }
        },
        mounted: function () {
          var vm = this
          //  $on       
          Bus.$on('val', (data) => {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }
    </script>

3.keyの役割
役割:仮想dom diffアルゴリズム仮想domをより効率的に更新するために、ノードタイプが異なる場合は、前のすべてのノードを直接乾かして、新しいノードを作成して挿入します.このノードの後のノードを比較することはありません.ノードタイプが同じ場合、ノードの属性を再設定し、ノードの更新を実現します.keyを使用して各ノードを識別します.diffアルゴリズムはこのノードを正しく識別することができます.新しい場所を見つけてノードを挿入できます
4.v-if v-show違い

v-ifは、スイッチング中に条件ブロック内のイベントリスナーおよびサブコンポーネントが適切に破棄され、再構築されることを保証するため、「真の」条件レンダリングです.

v-ifも不活性です.初期レンダリング時に条件が偽の場合、条件が初めて真になるまで何もしません.

と比較すると、v-showはずっと簡単です.初期条件がどんな要素であっても、常にレンダリングされ、CSSに基づいて簡単に切り替えられます.

一般的に、v-ifはより高いスイッチングオーバーヘッドを有し、v-showはより高い初期レンダリングオーバーヘッドを有する.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いるのが好ましい.実行時に条件が変更されない場合は、v-ifを使用するとよい.

5.cssを現在のコンポーネントでのみ使用する方法拡張:サードパーティ製コンポーネントを導入するスタイルをどのように変更しますか??たとえばswiperを導入し、ページ分割の小さな円点のスタイルを変更するにはsassのスタイル貫通を使用します:親要素/deep/サブ要素

<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
  background:red;
}
</style>

6.移動端時間処理300 ms遅延の問題を解決する

npm install fastclick

をダウンロード

は、import FastClick from’fastclick’FastClickを導入する.attach ( document. body);

7.vue-loader用途
vue-loaderはファイルローダで、template/js/styleとjsモジュールに置き換える用途です:jsはes 6 cssを書くことができてless sassを使うことができます
8.Next Tickは何をしているのか
説明:$nextTickは、次回のDOM更新サイクルが終了した後に遅延コールバックを実行し、関数を変更した後に$nextTickを使用すると、コールバックで更新後のDOMシーンを取得できます.ビューの更新後に新しいビューに基づいて操作します.
9.なぜ足場のdataが関数を返すのか
JS自体の特性がもたらすため、dataがオブジェクトである場合、オブジェクト自体が参照タイプであるため、いずれかの属性を変更すると、すべてのVueインスタンスのデータに影響します.dataを関数としてオブジェクトに返すと、各インスタンスのdataプロパティは独立しており、相互に影響しません.
10.keep-aliveの理解
定義:彼は内蔵のコンポーネントで、コンポーネントの切り替え中に回転状態をメモリに保存することができ、domの繰り返しレンダリングがdomツリーでレンダリングされないことを防止します.
11.watchとcomputedの違い

computed計算プロパティはdataの既知の値が新しい値に値するため、性能が悪く、他人の変化が自分に影響を与える(受動的)

である.

watchはdataのデータを傍受し、ルーティングの変化を傍受し、私の変化は他の人(アクティブ)に影響し、新しい値と古い値

を得ることができる.