Vue에 대한 기본적인 프론트엔드 인터뷰 질문을 요약하고 공유하세요.

이 글에서는 Vue에 대한 몇 가지 기본적인 프론트엔드 인터뷰 질문을 요약하고 공유하겠습니다. Vue 값 전송 방법, vuex, 컴포넌트 캡슐화 등에 대해 소개합니다. 이 측면은 우리 작업에서 일반적으로 사용되며 자주 묻는 질문이기도 합니다. 모두에게 도움이 되길 바랍니다!

vue 값 전달 방법

vue 값 전달

• 부모와 아들이 값 전달 소품을 사용하여 수락

• 아들과 아버지가 값 전달 아버지가 이벤트 함수 작성 아들 $emit가 값 전달을 트리거함

• Brother Pass 값 $버스 환승역

• 구성 요소 간의 관계가 멀리 떨어져 있으면 많은 구성 요소에서 vuex

• 값을 사용하게 됩니다. 주입 방법 제공, 주입 방법

[관련 권장 사항: " vue.js Tutorial》】

vuex 전역 상태 데이터 관리입니다 간단히 말해서 해당 데이터는 전역 변수와 유사하며 모든 구성 요소에서 사용할 수 있습니다.

프로젝트에서 vuex를 사용하세요

1 . vuex 패키지를 다운로드하고

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

2를 사용하여 가져옵니다. 새 vue

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

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

에 마운트해야 합니다. 이 단계는 다운로드해야 합니다. 스캐폴딩을 사용하여 vuex

를 직접 선택하세요.

그의 사용 로직은 무엇인가요?

스토어에 있는 상태에 적힌 데이터는 전역 데이터이고 모든 구성 요소에서 사용할 수 있습니다.

로직을 사용하여

전역 vuex 상태 데이터를 작동합니다.

정상적인 상황은 디스패치(액션)여야 합니다- -->action Go to commit to start mutation--"You can adjust the global state data in mutation

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

다른 경우에는 건너뛸 수도 있습니다 action and go direct to commit mutation--"전역 상태 데이터를 수정합니다

vuex는 어떻게 데이터를 합리적이고 표준적으로 관리하며, mutation과 actions의 차이점을 설명합니다

분석: 이 질문은 데이터 관리와 데이터 설계를 검토합니다. vuex의 구조와 mutation과 action의 차이

** 답변**: 우선 특히 중요한 원칙을 명확히 해야 합니다. vuex에 다음과 같은 유명한 말이 있기 때문입니다. 왜 vuex를 사용하고 싶은지 모르면 사용하지 마세요!

그러면 vuex에 어떤 종류의 데이터를 배치해야 할까요? 데이터는 여러 구성 요소에서 자주 사용해야 합니다. 하나의 구성 요소에서만 사용하는 경우 vuex를 사용할 필요가 전혀 없으며 vuex**解答** : 首先要明确一个特别重要的原则, 就是 不是所有的数据都要放在vuex中, 因为vuex有一句名言:假如你并不知道为什么要使用vuex,那就不要使用它 !

那么什么样式的数据需要放在vuex中呢 ? 首先这个数据肯定要被多个组件频繁用到, 如果只是被一个组件 用到, 那完全没有任何必要为了使用vuex和使用vuex

举例:  一个网站用户的昵称,账号,资料,像这种系统级别的信息 随时可能在业务中展示,使用, 如果在组件中存储, 那么要获取N次, 所以**系统级别的数据**是需要放置在vuex中的, 那么系统级别数据 也不能所以的放置,为了让数据看着更有层级结构感,可以按照像下面这样设计,

<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>

上面这种结构,一看 便知道我们应该哪里获取系统数据即 设置数据

如果有些业务数据,也需要共享,最好按照模块的具体业务含义分类 , 比如下面

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

如上图代码所示,我们很清晰的能够分清楚 每个模块的数据,这样不会导致数据管理的混乱

mutations和 actions 的区别

不同于redux只有一个action, vuex单独拎出了一个mutations,  它认为 更新数据必须是同步的, 也就是只要调用了 提交数据方法, 在mutation里面才可以修改数据

那么如果我们想做 异步请求,怎么做?  这里 vuex提供了专门做异步请求的模块,action, 当然action中也可以做同步操作, 只不过 分工更加明确, 所有的数据操作 不论是同步还是异步 都可以在action中完成,

mutation只负责接收状态, 同步完成 **数据快照**

예: 웹 사이트 사용자의 닉네임, 계정 번호, 정보 및 시스템 수준 정보 이와 같은 데이터는 언제든지 비즈니스에서 표시되고 사용될 수 있습니다. 컴포넌트에 저장하면 N번 획득되므로 **시스템 수준 데이터**를 vuex에 배치해야 합니다. 따라서 시스템 수준 데이터를 이런 방식으로 배치할 수 없습니다. 데이터를 보다 계층적으로 보이게 하려면 다음과 같이 설계할 수 있습니다.

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

위의 구조를 보면 시스템을 어디서 얻어야 하는지 한눈에 알 수 있습니다. 데이터, 즉 설정 데이터

일부 비즈니스 데이터도 공유해야 하는 경우 다음과 같이 모듈의 구체적인 비즈니스 의미에 따라 분류하는 것이 가장 좋습니다

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

코드에 표시된 대로 위에서 우리는 각 모듈의 데이터를 매우 명확하게 구분할 수 있어 데이터 관리에 혼란이 생기지 않습니다

Mutation과 Action의 차이점

redux와 달리 vuex라는 하나의 작업만 있습니다. 데이터 업데이트가 동기식이어야 한다고 믿는 돌연변이를 생각해 냈습니다. 즉, 데이터 제출 메서드가 호출되는 한 데이터는 돌연변이에서 수정될 수 있습니다

🎜그래서 우리가 원한다면 비동기식 요청을 하려면 어떻게 해야 합니까? 여기서 vuex는 전용 비동기식 요청 모듈인 작업을 제공합니다. 물론 동기식 작업도 실제로 수행할 수 있지만 동기식이든 작업이든 모든 데이터 작업이 더 명확합니다. 비동기식, 실행 완료 가능 🎜🎜mutation은 상태 수신만 담당하며 동기식으로 완료됩니다. **Data snapshot**🎜🎜그래서 🎜🎜state => 상태 저장 🎜🎜mutations => 상태를 동기식으로 업데이트하는 역할 🎜🎜🎜actions => 데이터 획득 및 처리 담당(비동기 작업이 있는 경우 작업이 실행된 다음 돌연변이로 처리되어야 함)🎜 상태 업데이트를 위해 mutation에 제출🎜🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!