Fassen Sie einige grundlegende Front-End-Interviewfragen zu Vue zusammen und teilen Sie sie

In diesem Artikel werden einige grundlegende Front-End-Interviewfragen zu Vue zusammengefasst und mit Ihnen geteilt. Er stellt die Vue-Wertübertragungsmethode, Vuex, Komponentenkapselung usw. vor. Dieser Aspekt wird in unserer Arbeit häufig verwendet und ist auch eine häufig gestellte Frage von Interviewern. Ich hoffe, es hilft allen! VUE-Wertübergabemethode

Brother Pass-Wert $ Bustransferstation

Wenn die Beziehung zwischen Komponenten weit entfernt ist, verwenden viele Komponenten den Wert

vuex

• bereitstellen, Injektionsmethode injizieren

• [Verwandte Empfehlungen: „

  vue.js Tutorial

  》】

• vuex

Es handelt sich um ein globales Zustandsdatenmanagement
• Einfach ausgedrückt ähneln seine Daten globalen Variablen und können von jeder Komponente verwendet werden

  Verwenden Sie Vuex im Projekt

• 1 . Laden Sie das Vuex-Paket herunter und importieren Sie es mit

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

  3. Sie müssen es auf neuem vue mounten. Sie können sich an den Download erinnern und verwenden Sie Gerüste, um Vuex direkt auszuwählen

Was ist seine Nutzungslogik?

Die im Speicher geschriebenen Statusdaten sind globale Daten und können von allen Komponenten verwendet werden. Verwenden Sie Logik, um die globalen Vuex-Statusdaten zu verwalten. -->Aktion Gehen Sie zum Festschreiben, um die Mutation auszulösen. - Aktion "Sie können die globalen Zustandsdaten in Mutation ändern

" ---> Mutation --->Zustand ändern. In anderen Fällen können Sie dies auch überspringen Aktion und gehen Sie direkt zum Festschreiben der Mutation – „Ändern Sie den globalen Status der Statusdaten.“ Wie verwaltet Vuex Daten angemessen und standardmäßig und der Unterschied zwischen Mutationen und Aktionen? Analyse: Diese Frage untersucht die Verwaltung von Daten und die Design der Datenstruktur in Vuex sowie der Unterschied zwischen Mutationen und Aktionen

** Antwort**: Zunächst müssen wir ein besonders wichtiges Prinzip klären, nämlich nicht alle Daten müssen in Vuex platziert werden, denn Vuex hat ein berühmtes Sprichwort: Wenn Sie nicht wissen, warum Sie Vuex verwenden möchten, dann verwenden Sie es nicht!

Welche Art von Daten müssen also zuerst in Vuex platziert werden? Alles in allem müssen diese Daten häufig von mehreren Komponenten verwendet werden. Wenn sie nur von einer Komponente verwendet werden, besteht absolut keine Notwendigkeit, vuex zu verwenden und vuex zu verwenden. Zum Beispiel: Der Spitzname, die Kontonummer, die Informationen und das System eines Website-Benutzers Informationen auf Ebene dieser Ebene können jederzeit im Unternehmen angezeigt und verwendet werden. Wenn sie in einer Komponente gespeichert werden, werden sie N-mal abgerufen, daher müssen **Daten auf Systemebene ** platziert werden In Vuex können Daten auf Systemebene nicht auf diese Weise platziert werden. Um die Daten hierarchischer erscheinen zu lassen, können sie wie folgt gestaltet werden: Erhalten Sie die Systemdaten, also die Einstellungsdaten.

Wenn auch einige Geschäftsdaten gemeinsam genutzt werden müssen, ist es am besten, sie entsprechend der spezifischen Geschäftsbedeutung des Moduls zu klassifizieren, z. B. wie folgt:

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

Wie gezeigt Im obigen Code sind wir sehr klar Kann die Daten jedes Moduls klar unterscheiden, um keine Verwirrung bei der Datenverwaltung zu verursachen

Der Unterschied zwischen Mutationen und Aktionen

Anders Redux, das nur eine Aktion hat, Vuex allein Ich habe mir eine Mutation ausgedacht, die glaubt, dass die Aktualisierung von Daten synchron sein muss, das heißt, solange die Methode zum Senden von Daten aufgerufen wird, können die Daten in der Mutation geändert werden

Also Wenn wir eine asynchrone Anfrage stellen möchten, wie geht das? Hier stellt vuex ein dediziertes asynchrones Anfragemodul bereit. Natürlich können synchrone Operationen auch in Aktion ausgeführt werden, aber die Arbeitsteilung ist klarer. ob synchron oder asynchron, kann in Aktion abgeschlossen werden

mutation ist nur für den Empfang des Status verantwortlich und wird synchron abgeschlossen **Datenschnappschuss**Es kann also davon ausgegangen werden, dass

state => ; ist verantwortlich für die Speicherung des Status mutations => ist verantwortlich für die synchrone Aktualisierung des Status

actions => ist verantwortlich für das Abrufen und Verarbeiten von Daten (falls vorhanden) Der Vorgang muss in Aktion verarbeitet werden und dann zur Mutation )

, Mutation zur Statusaktualisierung eingereicht

vuex-modulares Modulmanagement, es gibt Vorsichtsmaßnahmen bei der Verwendung

Analyse: Diese Frage untersucht, wann die von vuex verwalteten Daten immer komplexer werden, modulare Lösungen

**解析**:使用单一的状态树，应用的所有状态都会**集中在一个比较大的对象**上面，随着项目需求的不断增加，状态树也会变得越来越臃肿，增加了状态树维护的复杂度,而且代码变得沉长；因此我们需要**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 {}  每个组件实例都返回新对象实例的形式，保证每个组件实例的唯一性

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

Das obige ist der detaillierte Inhalt vonFassen Sie einige grundlegende Front-End-Interviewfragen zu Vue zusammen und teilen Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!