Summarize and share some basic front-end interview questions about Vue

This article will summarize and share with you some basic front-end interview questions about Vue. It will introduce the Vue value transfer method, vuex, component encapsulation, etc. This aspect is commonly used in our work and is often asked by interviewers. Question, hope it helps everyone!

vue value-passing method

vue value-passing

• Parent-child value-passing Use props to accept

• Son and father pass value. Father writes event function. Son $emit triggers value pass.

• Brother passes value. $bus transfer station

• If the relationship between components is far away, many components will use the value vuex

• provide, inject injection method

[Related recommendation: "vue.js Tutorial"]

vuex is a global state data management Simply put, its data is similar to global variables and can be used by any component.

Use vuex in the project

1. Download the vuex package and import it using use

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

2. You need to write the global data with new

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

3. You need to mount it on new 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>

This step is hard-coded and you can remember it Just download and use the scaffolding and you can directly select vuex

What is its usage logic?

The data written in the state in the store is global data. All components can use

Use logic

to operate the global The state data of vuex

Under normal circumstances, you must dispatch (action)--->action to commit to trigger mutation--》mutation to modify the state global data

action--- >mutation--->Modify state

In other cases, you can also skip the action and go directly to commit mutation--》Modify state global data

How does vuex manage data reasonably and standardize mutations? The difference between actions and actions

Analysis: This question examines the management of data and the design of data structures in vuex, as well as the difference between mutations and actions

**Answer**: First of all, we must clarify a particularly important principle, that is, not all data must be placed in vuex, because vuex has a famous saying: If you don’t know why you want to use vuex, then don’t use it It!

So what kind of data needs to be placed in vuex? First of all, this data must be frequently used by multiple components. If it is only used by one component, there is no need to use vuex and Using vuex

Example: A website user's nickname, account, and information. System-level information like this may be displayed and used in the business at any time. If stored in a component, it must be obtained N times. , so **system-level data** needs to be placed in vuex, so system-level data cannot be placed in this way. In order to make the data look more hierarchical, you can follow the following Design,

{
 // 系统消息
 system: {
     user: {},
     setting: {}
 }
}

With the above structure, you can tell at a glance where we should obtain the system data, that is, set the data

If some business data also needs to be shared, it is best Classify according to the specific business meaning of the module, such as the following

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

As shown in the code above, we can clearly distinguish the data of each module, which will not lead to confusion in data management

The difference between mutations and actions

Unlike redux, which has only one action, vuex has a separate mutation. It believes that the updated data must be synchronous, that is, as long as the commit is called Data method, data can only be modified in mutation

So if we want to make an asynchronous request, how to do it? Here vuex provides a module specifically for asynchronous requests, action. Of course, synchronous operations can also be done in action, only However, the division of labor is clearer. All data operations, whether synchronous or asynchronous, can be completed in action.

mutation is only responsible for receiving status and is completed synchronously**Data Snapshot**

So it can be considered that

state => is responsible for storing the state

mutations => is responsible for synchronously updating the state

actions => is responsible for obtaining and processing data (If there is an asynchronous operation, it must be processed in action and then to mutation) , submitted to mutation for status update

vuex modular module management, there are precautions when using it

Analysis: This question examines modular solutions when the data maintained by vuex becomes more and more complex

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

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

The above is the detailed content of Summarize and share some basic front-end interview questions about Vue. For more information, please follow other related articles on the PHP Chinese website!