1.v-forおよびv-ifの優先順位

明らかに、v-forはviの前に解析されます（ソースコードが明確に記述されています）
同時に発生した場合、各レンダリングは最初にループを実行してから状態を判断します。いずれの場合も、ループは避けられず、パフォーマンスが低下します。
この状況を回避するには、テンプレートを外側のレイヤーにネストし、このレイヤーでv-if判定を実行してから、内側でv-forループを実行します。

2.コンポーネント間で値を渡す

コンポーネントの値を渡す3つの方法

2.1.1親コンポーネントは値を子コンポーネントに渡します

1.親コンポーネントが子コンポーネントを呼び出すときに動的プロパティをバインドする <v-header :title="title"></v-header>
2.子コンポーネントには、親コンポーネントから渡されたデータを受信するための小道具があります
3.属性、メソッド、インスタンスを渡し、それらをサブコンポーネントで直接使用できます

2.1.2子コンポーネントは、親コンポーネントのプロパティとメソッドをアクティブに取得します

サブコンポーネントは直接渡されますthis.$parent.数据``this.$parent.方法

2.2つの子コンポーネントが親コンポーネントに値を渡します

2.2.1親コンポーネントは、子コンポーネントのデータとメソッドをアクティブに取得します

子コンポーネントを呼び出すときに参照を定義する <v-header ref="header"></v-header>
親コンポーネントを渡す 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.キーの役割

機能：仮想dom
diffアルゴリズムをより効率的に更新する
場合、ノードタイプが異なる場合、仮想domは以前のすべてのノードを直接強制終了し、新しいノードを作成して挿入し、その後のノードを比較しません。このノード。
ノードタイプが同じ場合は、ノードの属性をリセットしてノードの更新を実現します。
キーを使用すると、各ノードが識別情報として提供され、差分アルゴリズムでノードを正しく識別して、ノードを挿入する新しい位置。

4. v-ifv-showの違い

v-ifは「実際の」条件付きレンダリングです。これは、条件付きブロック内のイベントリスナーとサブコンポーネントが、切り替えプロセス中に適切に破棄および再構築されることを保証するためです。
v-ifも怠惰です：最初のレンダリングで条件がfalseの場合、条件が最初にtrueになるまで何も行われず、その後、条件付きブロックがレンダリングされます。
対照的に、v-showははるかに単純です。初期条件が何であっても、要素は常にレンダリングされ、CSSに基づいて単純に切り替えられます。
一般的に、v-ifはスイッチングのオーバーヘッドが高く、v-showは初期レンダリングのオーバーヘッドが高くなります。したがって、頻繁に切り替える必要がある場合は、v-showの方が適しています。実行時に条件が変更される可能性が低い場合は、v-ifの方が適しています。

5.cssを現在のコンポーネントでのみ機能させる方法

<style scope> </style>
拡張機能：サードパーティコンポーネントの導入スタイルを変更するにはどうすればよいですか？たとえば、スワイパーが導入された場合、ページングドットのスタイルを変更する必要があります。sassスタイルのペネトレーションの使用のデモンストレーション：親要素/ディープ/子要素

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

6.モバイル端末の時間処理における300msの遅延の問題を解決します

npm installfastclickをダウンロードします
引入
インポートFastClickfrom'fastclick '
FastClick。attach（document .body）;

7.vue-loaderの目的

vue-loaderはファイルローダーであり、テンプレート/ js / styleに置き換えられてjsモジュールになります
目的：jsはes6を書き込むことができますcssはより少ないsassを使用できます

8.NextTickは何をしますか

説明：
$ nextTickは、次のDOM更新サイクルの終了後に遅延コールバックを実行します。関数を変更した後、$ nextTickを使用して、コールバック内の更新されたDOM
シーンを取得します。ビューが更新された後、新しいビューに基づいて操作します

9.スキャフォールディングのデータが関数を返すのはなぜですか

JS自体の特性により、データがオブジェクトの場合、オブジェクト自体が参照型であるため、その属性の1つを変更すると、すべてのVueインスタンスのデータに影響します。データが関数としてオブジェクトに返される場合、各インスタンスのデータ属性は独立しており、相互に影響を与えることはありません。

10.キープアライブの理解

定義：これは組み込みコンポーネントです。コンポーネントの切り替えプロセス中に遷移状態をメモリに保存して、domの繰り返しレンダリングを防ぐ
ことができます。説明はdomツリーにレンダリングされません。

11.時計と計算値の違い

計算された属性は、新しい値を取得するためのデータ内の既知の値であり、パフォーマンスは良くなく、他の変更はあなたに影響を与えます（パッシブ）
Watchはデータ内のデータを監視し、ルーティングの変更を監視し、私の変更は他の人に（アクティブに）影響します。新しい値と古い値を取得できます

vueインタビューの知識ポイントの要約