vue の面接で選ばれた質問 (重要なポイント)

V001-vuerouter はどのように値を渡しますか?

1. コンポーネント

this で

path:'/detail/:id'
调用：
this.$router.push({
    path:'/home/${id}'
})

を設定します。 $route.params.id が取得できます。

[トピックの推奨事項]:2020 フロントエンド Vue インタビューの質問の概要 (回答付き)

2. router-link 内パラメータをタグで渡します。

<router-link :to = {
    params:{
        id:1
    }
}/>

次の方法でも取得できます: this.$route.params.id

ここでのパラメータ受け渡し方法は、ルーターリンクを介して受け渡す非表示のパラメーターです。

3. params の別の方法は、params を通じてパラメータを渡し、名前を通じてルーティングを設定することです。

//路由处：
{
    path：'/home',
    name:'Home',
    component:Home
}
调用：
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})

Get: this.$route.params.id

4. クエリを通じてパラメータを渡すと、パラメータはクエリの後の ?id=? に表示されます。 url

//路由处：
{
    path：'/home',
    name:'Home',
    component:Home
}
调用：
this.$router.push({
    path:'/home',
    query:{
        id:id
    }
})

Get:this.$route.query.id

V002-v-if と v-for を併用する場合の欠点と解決策

v-for は v-if よりも優先度が高いため、ループするたびに 1 回 v-if に進み、v-if が通過しますDOM 要素を作成および破棄して要素の表示と非表示を制御するため、要素が常に作成および破棄されるため、ページラグやパフォーマンスの低下が発生します。

解決策:

1. v-for の外側または内側の層で要素をラップして、v-if

2. computed を使用します。処理

  <ul>
        <li
          v-for="item in qdleaderArr"
          v-if="item.isActive"
          :key="item.id"
        >
          {{ item.name }}
        </li>
  </ul>

は次のように処理されます。

computed: {
    qdleaderArrActive: function () {
        return this.qdleaderArr.filter(function (item) {
          return item.isActive
        })
    }
}
<ul>
    <li
      v-for="item in qdleaderArrActive"
      :key="item.id"
    >
        {{ item.name }}
    </li>
</ul>

V003 で一般的に実行される操作 -beforeDestory

beforedestoryed は、コンポーネントが実行される前に実行されるライフサイクルです。このライフサイクルでは、コールバック関数またはタイマーをクリアできます。

① カスタム イベントのバインドを解除します。 event.$off ② タイマーを削除します。 ③ ウィンドウなどのカスタム DOM イベントのバインドを解除します。スクロールなど。

たとえば、次のシナリオ: クエリをクリックしたときに日付を保存し、読み取りメモリを更新する必要がありますが、他のページをクリックして再度アクセスすると、メモリをクリアする必要があります

search(){
      let time = {
        start: this.formSearch.beginSearchTime,
        end: this.formSearch.endSearchTime,
        timeRange: this.formSearch.timeRange,
        page: this.formSearch.page
      }
      localStorage.setItem('initTime',JSON.stringify(time))
    }
 created () {
    let searchCarTime = JSON.parse(localStorage.getItem('initTime'))
    if (searchCarTime) {
      this.formSearch.beginSearchTime = searchCarTime.start
      this.formSearch.endSearchTime = searchCarTime.end,
      this.formSearch.timeRange = searchCarTime.timeRange
      this.formSearch.page = searchCarTime.page
    }
  },
 beforeDestroy(){
    localStorage.removeItem('initTime')
  }

V004-値を渡す同様のコンポーネント

1。兄弟コンポーネントの場合、値は次のように親要素を介して渡すことができます。中間コンポーネント

1.2 $emit値を転送し、プロパティを受け取る

$emitを使用してchild1.vueの値を親コンポーネントに渡します。親コンポーネントは次の値を渡します。 child2.vue への値。child2.vue は props を使用して、parent.vue

<template>
  <div>
     <h2>我是父组件</h2>
     <child1 @handleClickChange="handleClickChangeTitle"></child1>
     <child2 :ptitle="title"></child2>
  </div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {
  data() {
    return {
      title: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    handleClickChangeTitle(title){//将改方法传递给child1组件
        this.title = title
    }
  }
}
</script>

child1.vue

<template>
  <div>
     <h2>我是child1组件</h2>
     <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件
    }
  }
}
</script>

# を受け取ります。 ##child2.vue

<template>
  <div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父组件穿过来的值ptitle
 props:{ptitle:{ type: String}}
}
</script>

2. バスを作成して、値 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 创建一个文件，定义bus中间件，并导出 const bus = new Vue() // 在一个组件中发送事件 bus.$emit(&amp;#39;事件名称&amp;#39;, 传递的参数) // 在另一个组件中监听事件 bus.$on(&amp;#39;事件名称&amp;#39;, 得到传过来的参数)</pre><div class="contentsignin">ログイン後にコピー</div></div> を渡します。 具体的な使用法: 新しい Bus.js ファイルを同じディレクトリに作成します。 main.js

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

2.コンポーネント a

に値を渡します最初に

bus.js

ファイルを導入し、次に値

$emit

を渡します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div @click=&quot;onfocus&quot;&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Bus from &amp;#39;@/bus.js&amp;#39; export default{ methods:{ onfocus:function(fromid){ Bus.$emit(&amp;#39;getisshow&amp;#39;,{ show:true }) } } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>3 へ。$on

<script>
    import Bus from &#39;@/bus.js&#39;
    
    export default{
        created(){
            Bus.$on(&#39;getisshow&#39;,data => {
                console.log(data)   //{show:true}
            })
        }
    }
</script>

を通じて同じレベル b コンポーネントで受け取ります。関連する学習の推奨事項: JavaScript ビデオ チュートリアル

以上がvue の面接で選ばれた質問 (重要なポイント)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。