이 글에서는 Vue에 대한 몇 가지 기본적인 프론트엔드 인터뷰 질문을 요약하고 공유하겠습니다. Vue 값 전송 방법, vuex, 컴포넌트 캡슐화 등에 대해 소개합니다. 이 측면은 우리 작업에서 일반적으로 사용되며 자주 묻는 질문이기도 합니다. 모두에게 도움이 되길 바랍니다!
부모와 아들이 값 전달 소품을 사용하여 수락
아들과 아버지가 값 전달 아버지가 이벤트 함수 작성 아들 $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 '@/components/HelloWorld.vue' import { mapMutations , mapActions ,mapState } from 'vuex' export default { name: 'Home', components: { // HelloWorld }, data(){ return { list:[ {id:1,src:'http://122.51.238.153/images/1.jpg'}, {id:2,src:'http://122.51.238.153/images/2.jpg'}, {id:3,src:'http://122.51.238.153/images/3.jpg'}, {id:4,src:'http://122.51.238.153/images/4.jpg'} ] } }, created(){ console.log('created') console.log('store',this.$store) }, mounted(){ console.log("home 的 mounted") }, methods:{ // 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation // 把loginMutation 放到this上 并且帮你写好了 commit // 相当于帮你简化了代码 ...mapMutations('m1', ['loginMutation']), //不是modules的直接写 ...mapMutations( ['loginMutation']) add(){ // console.log('add',this) // console.log('add',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('res',res) let res=await this.$http.get("/api/getok.php") console.log('res',res) }, addCount(){ // 让全局数据count+1 // 1 正常情况 // dispatch 触发action // -》commit触发mutation // -》在mutation修改全局数据 //2 其他情况 可以直接跳过action 但是必须mutation修改 // console.log('$store',this.$store) // this.$store.dispatch( 'countAction' ) this.$store.commit("countMutation") } } } </script>
上面这种结构,一看 便知道我们应该哪里获取系统数据即 设置数据
如果有些业务数据,也需要共享,最好按照模块的具体业务含义分类 , 比如下面
{ // 系统消息 system: { user: {}, setting: {} } }
如上图代码所示,我们很清晰的能够分清楚 每个模块的数据,这样不会导致数据管理的混乱
不同于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树
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
组件是什么?组件是一段功能代码 ---大白话 就是一段html +js +css 你可以重复使用
封装轮播图 - 1 新建vue组件 2 Vue.component注册组件 3 在其他组件使用 标签名
参数: 可以传入数据 使用props接受 比如 数组 定时器时间等
分析: 本题考查 对于Vue组件化开发的熟练程度
解析: 首先明确 组件是本质是什么?
组件就是一个单位的HTML结构 + 数据逻辑 + 样式的 操作单元
Vue的组件 继承自Vue对象, Vue对象中的所有的属性和方法,组件可自动继承.
要封装一个组件,首先要明确该组件要做的具体业务和需求, 什么样的体验特征, 完成什么样的交互, 处理什么样的数据
明确上述要求之后, 着手模板的结构设计及搭建,也就是 常说的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
分析: 此题考查 data的存在形式 解析: 我们在初步学习Vue实例化的时候写的代码时这个样子上面代码中的data 是一个对象, 但是我们在开发组件的时候要求data必须是一个带返回值的函数
new Vue({ el: '#app', data: { name: 'hello world' } })
export default { data () { return { name: '张三' } } }
为什么组件要求必须是带返回值的函数? 因为 我们的组件在实例化的时候, 会直接将data数据作用在视图上,对组件实例化, 会导致我们组件的data数据进行共享
好比 现在有两辆新车, 你一踩油门, 不光你的车往前车,另辆车也和你一样往前冲!
这显然不符合我们的程序设计要求, 我们希望组件内部的数据是相互独立的,且互不响应,所以 采用 return {} 每个组件实例都返回新对象实例的形式,保证每个组件实例的唯一性
更多编程相关知识,请访问:编程入门!!
위 내용은 Vue에 대한 기본적인 프론트엔드 인터뷰 질문을 요약하고 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!