前端开发VUE基础面试题分享

vue传值方式vue传值父子传值使用props接受子父传值father写事件函数child$emit触发传值brother传值$bus中转station如果组件之间的关系很远，很多组件必须使用值vuexprovide，inject注入方法vuex是全局状态数据管理。简单的说，它的数据类似于全局变量，可以使用哪些组件。在项目中使用vuex，下载vuex包并导入。importVuexfrom'vuex'Vue.use(Vuex)needsnewwriteglobaldataatonce//storenewVuex.Store({state:{count:1//thiscountistheglobaldata},mutations:{},actions:{}})需要挂载到newvuenewVue({router,store,render:h=>h(App)}).$mount('#app')这一步是硬编码的。大家可以记得下载使用脚手架直接选择vuex。它的使用逻辑是什么？store中state写入的数据前端训练的是全局数据所有组件都可以使用逻辑来操作全局vuex的状态数据。正常情况下必须dispatch(action)--->actiontocommittotriggermutation-->mutationtomodifythestateglobaldataaction--->mutation--->modifystate的其他情况，也可以跳过action直接去commitmutation--》修改状态全局数据如何合理规范vuex的管理数据，分析mutation和action的区别：本题考查vuex中的数据管理和数据结构设计，并回答到mutations和action的区别：首先要明确一个特别重要的原则，就是不是所有的数据都应该放在vuex中，因为vuex中有一句名言：Ifyoudon'tknowwhyyou想用vuex，那就别用了！那么什么样的数据需要放在vuex中呢？首先，这些数据必须经常被多个组件使用。如果只是一个组件使用，那就没必要用vuex，用vuex。例：网站用户昵称、账号、数据等系统级信息，随时可能在业务中展示和使用。如果存储在组件中，则需要获取N次，所以系统级的数据需要放在vuex中，那么系统级的数据就不能相应地放置了。为了让数据看起来更有层次感，可以这样设计，{//系统消息system:{user:{},setting:{}}}上面的结构，一个可以看出我们应该从哪里获取系统数据，即设置数据。如果有些业务数据也需要共享，最好根据模块的具体业务含义进行分类，比如下面的{//系统消息系统：{user:{},setting:{}},product:{productList:[],//商品信息列表productOrders:[]//商品订单列表}}如代码所示，我们可以清楚地区分各个模块的数据，这样数据就不会被管理混乱了betweenmutationsandactions不同于redux，后者只有一个action。Vuex有一个单一的突变。它认为更新数据必须是同步的，即只要调用了提交数据的方法，在mutation那么，如果我们要进行异步请求，我们应该怎么做呢？这里vuex提供了异步请求，action的模块，当然action中也可以做同步操作，但是分工比较明确，所有的数据操作北京前端培训无论是同步还是异步，都可以在动作中完成。Mutation只负责接收状态，同步完成数据快照，所以可以认为state=>负责存储状态mutations=>负责同步更新状态action=>负责获取和处理数据（如果有异步操作）必须在action中处理后再进行mutation），提交给mutation进行状态更新。vuex模块化模块管理，使用时有注意事项分析：本题考查vuex维护的数据越来越复杂时的模块化方案分析：使用单一的状态树，应用的所有状态都会集中在一个相对较大的物体。随着项目需求的不断增加，状态树会越来越臃肿，增加状态树维护的复杂度，代码也变得繁重；所以我们需要模块（模块化）将我们的状态树分成不同的模块，每个模块都有自己的状态、getters、mutations、actions；并且每个模块都允许嵌套子模块；如下：store├──index.js#我们组装模块和导出的地方store├──actions.js#根级动作├──mutations.js#根级突变├──state.js#根级状态└──modules├──module1.js#模块1的状态树└──module2.js#模块2的状态树在上面的设计中，每个vuex子模块都可以定义state/mutations/actions需要注意的更何况，我们原来是使用vuex的辅助函数mapMutations/mapActions来引入全局的mutations和action，而我们的vuex子模块是module1，module2...这些模块的aciton/mutation也是全局注册的，也就是说，如果module1定义loginMutation，loginMutation也在module2中定义。这时，突变发生冲突。如果名字相同，会报错。。。如果不想冲突，每个模块管理自己的action和mutation，我们需要给我们的子模块一个属性namespaced:true那么如何usesubmoduleactionsandmutationsinthecomponent//你可以将模块的空间名称字符串作为第一个参数传递给上面的函数，这样所有的绑定都会自动使用模块作为上下文方法：{...mapMutations('m1',['loginMutation']),add(){console.log('add',this)//this.$store.commit("m1/loginMutation")//或者下面第一个mapMutations相当于写了一个commitforyou//this.loginMutation()}}//这句话的意思是直接解构全局m1模块下的loginMutation//把loginMutation放在这上面，给你写commit//相当于给你简化了代码...mapMutations('m1',['loginMutation']),//直接写而不是模块...mapMutations(['loginMutaton])store.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)//1下载vuex并导入使用//2newVuex.Store//3挂载到新的vueexportdefaultnewVuex.Store({state:{//写到这里最重要的是所有组件都可以有全局数据//name:value//如果我的1000个全局数据可以重命名count:100},mutations:{countMutation(state){//state是globalstateconsole.log('mutationtriggered',state)state.count++}},actions:{//动作对对应的functioncountAction(obj){console.log('actiontriggered',obj)//obj对象中有commitobj.commit("countMutation")}},//modules中可以分模块storeglobaldataManaged//可以用来区分各个不同模块的数据//15:10Classmodules:{//Module:{一组状态actionmutation}m1:{namespaced:true,//打开namespace说一下是在m1下，不会影响其他//Moduleassets（模块资产）state:{//模块中的state已经嵌套了，使用`namespaced`属性不会影响m1Name:"Iamm1m1Nameofthemodule"},actions:{loginAction(){console.log('m1'saction')}//->dispatch('m1/loginAction')},mutations:{loginMutation(){console.log('loginMutation-executed')}//->commit('m1/loginMutation')}},home:{namespaced:true,state:{count:1}},about:{namespaced:true,state:{count:100},actions:{}},}})ThisquestionspecificallyexaminesthatVuex虽然是一个publicstate，但是publicstate也可以分成几个子状态模块，也就是modules，来解决当我们的状态树太大太复杂时的一个解决方案。但是笔者认为，一旦使用了vuex，项目几乎算是变复杂了。参考文档封装Vue组件的步骤是什么？一个组件就是一段功能代码---白话就是一段html+js+css封装后的轮播可以复用——1新建一个vue组件2注册vue.componentComponent3在其他组件中使用标签名参数：可以传入数据，使用props接受比如数组timertime分析：本题考查Vue组件开发熟练度分析：首先明确一个组件的本质是什么？一个组件是一个单元HTML结构+数据逻辑+样式操作单元Vue组件继承自Vue对象，Vue对象中的所有属性和方法，组件都可以自动继承。组件元素模板=>作为页面模板结构脚本=>作为数据和逻辑部分样式=>作为组件部分的样式部分，封装一个组件，首先要明确具体的业务和需求有什么样的体验功能，完成什么样的交互，处理什么样的数据。明确了以上需求后，开始模板的结构设计和搭建，也就是常说的html结构部分，先完成静态htmlstructure结构，然后开始数据结构的设计和开发。数据结构一般存放在组件的data属性或者vuex状态共享数据结构数据设计完成/结构完成，然后完成数据和模块的组合，静态结构的动态展示利用vuejs中指令和插值表达式的特性完成。接下来完成交互部分，即在组件的生命周期中使用钩子函数和事件驱动来完成逻辑和数据的处理和操作。最后组件完成，测试使用常用组件属性=>data/methods/filters/components/watch/created/mounted/beforeDestroy/computed/props常用组件说明：v-if/v-on中的数据是否/v-bind/v-model/v-text/v-onceVue是以函数的形式还是以对象的形式来表达分析：本题考察数据的存在形式分析：我们第一次写的代码学过的Vue实例化是这样的。上面代码中的数据是一个对象，但是我们在开发组件的时候，要求数据必须是一个有返回值的函数newVue({el:'#app',data:{name:'helloworld'}})exportdefault{data(){return{name:'张三'}}}为什么组件需要一个有返回值的函数？因为我们的组件在实例化的时候，dat会直接adata作用于view，实例化组件会导致我们组件的data数据被共享。比如现在有两款新车。当你踩油门的时候，不仅你的车会往前走，其他的车也会跟你一样往前走Forward！这显然不符合我们的编程要求。我们希望组件内部的数据相互独立，互不响应。因此，每个组件实例以return{}的形式返回一个新的对象实例，保证每个组件实例的唯一性