Vue に関するフロントエンド面接の基本的な質問を要約して共有する

この記事では、Vue に関するフロントエンドの面接での基本的な質問を要約して共有します。Vue の値の転送方法、vuex、コンポーネントのカプセル化などについて紹介します。この側面は私たちの仕事で一般的に使用されており、よく質問されます。質問です。皆さんのお役に立てば幸いです。

#vue 値の受け渡しメソッド

vue 値の受け渡し

• 親-子の値の受け渡し 小道具を使用して値の受け渡しを受け入れます

• 息子と父が値を渡します。父はイベント関数を作成します。息子は $emit で値の受け渡しをトリガーします。

• Brother が値を渡します。$bus transfer station

• コンポーネント間の関係が遠く離れている場合、多くのコンポーネントは値

  vuex

  ## を使用します。
#提供、注入メソッド
[関連する推奨事項: 「

vue.js チュートリアル

」]

vuex

はグローバル状態データ管理です 簡単に言うと、そのデータはグローバル変数に似ており、どのコンポーネントでも使用できます。

プロジェクトで vuex を使用します

1. vuex パッケージをダウンロードし、use

import Vuex from 'vuex'
Vue.use(Vuex)

2 を使用してインポートします。new

// store
new Vuex.Store({
state: {
count:1 //这个count 就是全局的数据
},
mutations: {
},
actions: {
}
})

3 を使用してグローバル データを書き込む必要があります。新しい vue にマウントする必要があります

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

<template>
  <div class="home">
     <!-- home啊
     <hr>
     {{$store.state.m1.m1Name}}
    <button @click="add">点击</button> -->

    <!-- <hr> -->
    <!-- <my-swiper :list="list"></my-swiper> -->

    <button @click="getAll">发送请求</button>

    home组件啊
    <hr>
    <h1>count的值:{{$store.state.count}}</h1>
    <button @click="addCount">让全局count+1</button>
    <hr>
    <h2>m1下的全局数据 {{$store.state.m1.m1Name}} </h2>
     <button @click="add">点击修改某个模块的数据</button>

     <!-- 3 哪个组件要用 就直接 使用注册的组件标签名 -->
     <hr>
     <!-- 用组件 传了list数据进去 -->
     <my-swiper :list="list"></my-swiper>
     
  </div>
</template>


<script>
// 要在组件使用全局数据 
// 1 在html范围 直接 $store.state.名字
// 2 在js范围  this.$store.state.名字

// @ is an alias to /src
// import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
import {  mapMutations , mapActions ,mapState } from &#39;vuex&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    // HelloWorld
  },
  data(){
    return {
      list:[
             {id:1,src:&#39;http://122.51.238.153/images/1.jpg&#39;},
             {id:2,src:&#39;http://122.51.238.153/images/2.jpg&#39;},
             {id:3,src:&#39;http://122.51.238.153/images/3.jpg&#39;},
             {id:4,src:&#39;http://122.51.238.153/images/4.jpg&#39;}
           ]
    }
  },
  created(){
    console.log(&#39;created&#39;)
    console.log(&#39;store&#39;,this.$store)
  },
  mounted(){
    console.log("home 的 mounted")
  },
  methods:{
    // 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation 
    // 把loginMutation 放到this上 并且帮你写好了 commit
    // 相当于帮你简化了代码
     ...mapMutations(&#39;m1&#39;, [&#39;loginMutation&#39;]),
    //不是modules的直接写  ...mapMutations( [&#39;loginMutation&#39;])
     add(){
      //  console.log(&#39;add&#39;,this)
      //   console.log(&#39;add&#39;,this.$route.meta)
      //  this.$store.commit("m1/loginMutation")
      // 或者下面的  先mapMutations 相当于帮你写了commit
      this.loginMutation()
      // this.$store.commit("m1/loginMutation")
      // 和刚刚的思路 就是加上一个模块前缀 m1/ 
      // this.$store.dispatch("m1/loginAction")
     },
     async getAll(){
      //  http://localhost:8080/
      // 请求 http://122.51.238.153/getok.php
      //  let res=await this.$http.get("http://122.51.238.153/getok.php")
      //  console.log(&#39;res&#39;,res)
      let res=await this.$http.get("/api/getok.php")
      console.log(&#39;res&#39;,res)
     },
     addCount(){
        //  让全局数据count+1
        // 1 正常情况 
        // dispatch 触发action
        // -》commit触发mutation
        // -》在mutation修改全局数据
        //2 其他情况 可以直接跳过action 但是必须mutation修改
        // console.log(&#39;$store&#39;,this.$store)
        // this.$store.dispatch( &#39;countAction&#39; )
        this.$store.commit("countMutation")
      }
  }
}
</script>

このステップはハードコーディングされているため、覚えておくことができます。スキャフォールディングをダウンロードして使用するだけで、vuex

その使用ロジックは何ですか? ?

ストアのステートに書き込まれるデータはグローバル データです。すべてのコンポーネントは、

Use ロジック

を使用して、グローバル vuex の状態データを操作します。

通常の状況では、状態グローバル データを変更するには、(アクション)--->アクションをコミットしてミューテーションをトリガーする-->>ミューテーションをディスパッチする必要があります

アクション--- >ミューテーション--->状態の変更

他の場合には、アクションをスキップして、ミューテーションのコミットに直接進むこともできます-->>状態グローバル データの変更

vuex はどのようにしてデータを合理的に管理し、突然変異を標準化しますか? アクションとアクションの違い

分析: この質問では、vuex でのデータの管理とデータ構造の設計、および突然変異とアクションの違い

**回答**

: まず、特に重要な原則を明確にする必要があります。それは、すべてのデータを配置する必要はないということです。なぜなら、vuex には次の有名な格言があるからです: vuex を使用する理由がわからない場合は、使用しないでください!それでは、どのような種類のデータを vuex に配置する必要がありますか? まず、とりわけ、このデータは複数のコンポーネントで頻繁に使用される必要があります。1 つのコンポーネントでのみ使用される場合は、vuex を使用する必要はなく、vuex の使用

#例: Web サイト ユーザーのニックネーム、アカウント、このようなシステム レベルの情報は、ビジネスでいつでも表示および使用できます。コンポーネントに保存されている場合は、N 回取得する必要があります。したがって、

**システム レベルのデータ**

vuex に配置する必要があるため、システム レベルのデータをこの方法で配置することはできません。データをより階層的に見せるために、次の設計に従うことができます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{ // 系统消息 system: { user: {}, setting: {} } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

上記の構造を使用、システム データをどこで取得する必要があるか、つまりデータを設定する必要があるかが一目でわかります。

ビジネス データも共有する必要がある場合は、特定のビジネス上の意味に従って分類するのが最善です

{
    // 系统消息
    system: {
        user: {},
        setting: {}
    },
    product: {
        productList: [], // 商品信息列表
        productOrders: [] // 商品订单啊列表
    }
}

上記のコードに示すように、各モジュールのデータを明確に区別できるため、データ管理の混乱を招くことはありません

ミューテーションとアクションの違い

アクションが 1 つだけある redux とは異なり、vuex には別のミューテーションがあります。更新されたデータは同期している必要があると考えられています。 commit は Data メソッドと呼ばれ、データはミューテーションでのみ変更できます

それでは、非同期リクエストを作成したい場合、どうすればよいでしょうか? ここで、vuex は非同期リクエスト、アクション専用のモジュールを提供します。操作はアクション内でのみ行うこともできますが、分業はより明確です。同期か非同期かにかかわらず、すべてのデータ操作はアクション内で完了できます。

ミューテーションはステータスの受信のみを担当し、同期的に完了します

**データ スナップショット**

したがって、

state => は状態を保存する責任があると考えることができます。状態の同期更新を担当します

actions => データの取得と処理を担当します (非同期操作がある場合は、アクションで処理してから変更する必要があります)

,ステータス更新のためにミューテーションに送信されます

vuex モジュラー モジュール管理、使用する際の注意事項があります

分析: この質問は、vuex によって維持されるデータが増加した場合のモジュラー ソリューションを検討します。さらに複雑です

**解析**:使用单一的状态树，应用的所有状态都会**集中在一个比较大的对象**上面，随着项目需求的不断增加，状态树也会变得越来越臃肿，增加了状态树维护的复杂度,而且代码变得沉长；因此我们需要**modules(模块化)**来为我们的状态树**分隔**成不同的模块，每个模块拥有自己的state，getters，mutations，actions；而且允许每个module里面嵌套子module；如下：

 store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    ├── state.js          # 根级别的 state
    └── modules
        ├── module1.js   # 模块1的state树
        └── module2.js   # 模块2的state树

上面的设计中, 每个vuex子模块都可以定义 state/mutations/actions

需要注意的是 我们原来使用**vuex辅助函数** mapMutations/mapActions 引入的是 全局的的mutations 和actions , 并且我们vuex子模块 也就是module1,module2 ... 这些模块的aciton /mutation 也注册了全局,

也就是如果 module1 中定义了 loginMutation, module2中也定义了 loginMutation, 此时, mutation就冲突了

如果重名,就报错了.....

如果不想冲突, 各个模块管理自己的action 和 mutation ,需要 给我们的子模块一个 属性 **namespaced: true**

那么 组件中怎么使用子模块的action 和 mutations

// 你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文
 methods:{
     ...mapMutations('m1', ['loginMutation']),
     add(){
       console.log('add',this)
      //  this.$store.commit("m1/loginMutation")
      // 或者下面的  先mapMutations 相当于帮你写了commit
      // this.loginMutation()
     }
  }

     // 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation 
    // 把loginMutation 放到this上 并且帮你写好了 commit
    // 相当于帮你简化了代码
     ...mapMutations('m1', ['loginMutation']),
       //不是modules的直接写  ...mapMutations( ['loginMutaton])

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 1 下载vuex 导入 use一下
// 2 new Vuex.Store
// 3 挂载到new  vue上
export default new Vuex.Store({
  state: {
    // 在这里写的就是所有组件都能有 全局数据了
    // 名字:值
    // 如果我1000个全局数据 有可能重名
    count:100
  },
  mutations: {
    countMutation(state){
      // state 就是那个全局state
      console.log('mutation触发了',state)
      state.count++
    }
  },
  actions: {
    // action对应的函数
    countAction(obj){
      console.log('action触发了',obj)
      // obj对象 里面有commit
      obj.commit("countMutation")
    }
  },
  // modules 在store全局数据 是可以来分模块管理的
  // 他可以用来区分每个不同模块的数据
  // 15:10 上课
  modules: {
    // 模块:{  一套state action mutation }
    m1: {
      namespaced: true,//开启命名空间大白话 他是m1下的 不会影响其他人

      // 模块内容（module assets）
      state: { // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
        m1Name:"我是m1模块的m1Name"
      }, 
      actions: {
        loginAction () { 
            console.log('m1的action')
        } // -> dispatch('m1/loginAction')
      },
      mutations: {
        loginMutation () { 
          console.log('loginMutation-执行啦')
        } // -> commit('m1/loginMutation')
      }
    },
    home:{
        namespaced: true,
        state:{
          count:1
        }
    },
    about:{
      namespaced: true,
        state:{
          count:100
        },
        actions:{

        }
       
    },
    
  }
})

此题具体考查 Vuex虽然是一个公共状态, 但是公共状态还可以切分成若干个子状态模块, 也就是moduels,

解决当我们的状态树过于庞大和复杂时的一种解决方案. 但是笔者认为, 一旦用了vuex, 几乎 就认定该项目是较为复杂的

参考文档

https://vuex.vuejs.org/zh/guide/modules.html

封装Vue组件的步骤

组件是什么？组件是一段功能代码 ---大白话 就是一段html +js +css 你可以重复使用

封装轮播图 - 1 新建vue组件 2 Vue.component注册组件 3 在其他组件使用 标签名

参数： 可以传入数据 使用props接受 比如 数组 定时器时间等

分析: 本题考查 对于Vue组件化开发的熟练程度

解析: 首先明确 组件是本质是什么?

组件就是一个单位的HTML结构 + 数据逻辑 + 样式的 操作单元

Vue的组件 继承自Vue对象, Vue对象中的所有的属性和方法,组件可自动继承.

• 组件的要素 template => 作为页面的模板结构
• script => 作为数据及逻辑的部分
• style => 作为该组件部分的样式部分

要封装一个组件,首先要明确该组件要做的具体业务和需求, 什么样的体验特征, 完成什么样的交互, 处理什么样的数据

明确上述要求之后, 着手模板的结构设计及搭建,也就是 常说的html结构部分, 先完成 静态的html结构

结构完成, 着手数据结构的设计及开发, 数据结构一般存储于组件的data属性 或者 vuex 状态共享的数据结构

数据设计完成/ 结构完成 接下来 完成数据和模块的结合 , 利用vuejs中指令和 插值表达式的特性 将静态结构 **动态化**

展现的部分完成, 接下来完成**交互部分**,即利用 组件的生命周期的钩子函数 和 事件驱动 来完成 逻辑及数据的处理与操作

最后组件完成,进行测试及使用

常用的组件属性 => data/ methods/filters/ components/watch/created/mounted/beforeDestroy/computed/props

常用组件指令: v-if/v-on/v-bind/v-model/v-text/v-once

Vue中的data是以函数的形式还是对象的形式表示

分析: 此题考查 data的存在形式 解析: 我们在初步学习Vue实例化的时候写的代码时这个样子上面代码中的data 是一个对象, 但是我们在开发组件的时候要求data必须是一个带返回值的函数

new Vue({
    el: '#app',
    data: {
        name: 'hello world'
    }
})

export default {
    data () {
        return {
            name: '张三'
        }
    }
}

为什么组件要求必须是带返回值的函数?  因为 我们的组件在实例化的时候, 会直接将data数据作用在视图上,对组件实例化, 会导致我们组件的data数据进行共享

好比  现在有两辆新车, 你一踩油门, 不光你的车往前车,另辆车也和你一样往前冲!   

这显然不符合我们的程序设计要求, 我们希望组件内部的数据是相互独立的,且互不响应，所以 采用   return {}  每个组件实例都返回新对象实例的形式，保证每个组件实例的唯一性

更多编程相关知识，请访问：编程入门！！

以上がVue に関するフロントエンド面接の基本的な質問を要約して共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。