Vue高频面试题总结

一、Vue常见的指令有哪些，有什么用

v-text	会替换掉元素里的内容
v-html	可以渲染html界面
v-clock	防止界面闪烁
v-bind	界面元素属性值的绑定，简写为：
v-on	事件绑定，简写为@
v-model	数据双向绑定
v-for	v-for可用来遍历数组、对象、字符串
v-if、v-else、v-else-if	判断条件
v-show	控制显示隐藏
v-once	只会执行一次渲染，当数据发生改变时，不会再变化

二、双向数据绑定的原理

双向数据绑定：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

三、路由的跳转和传参有哪几种方式

声明式	<!-- 声明式跳转 --> 1、to=”路径” <router-link to="/detail">去详情 </router-link> 2、直接问号拼接 <router-link to="/detail?id=104&name='zs'">去详情2222 </router-link>            3、path:路径，query:传参 <router-link :to="{path:'/detail',query:{id:103,name:'zs'}}">去详情 </router-link> 4、name:路径，params:传参（必须传定义好的参数） <router-link :to="{name:'my',params:{userid:234}}"> 去个人中心 </router-link>
函数式	// 函数式跳转   todetail(){     // this.$router.push('/detail')     this.$router.push({path:'/detail'})              this.$router.push({path:'/mine',query:{id:104,name:'lisi'}}) this.$router.push({name:"my", params:{userid:999} })  },              获取：this.$route.query. name     this.$route.params. userid

四、组件间的通讯方式有哪些

父传子	父组件中在引用的子标签中自定义属性传值 //子标签 <son :data="toSon"></son> //数据 data: {        toSon:'传给子组件', } 子组件用props接收父组件的传值 //props和data同级 props:{         //data:String,         // 或者设置默认值         data:{           type:[Number,String],           default:"默认值"         },       },
子传父	在父组件中自定义事件接收数据 //在父组件中 methods: {     formSon(data){          console.log(data)  //data即传来的数据      } } //子标签 <son @fromSon1="fromSon"></son> 子组件触发$emit传递数据 //可以在生命周期中触发或者设置点击事件触发 created(){          this.$emit('fromSon1',"传到父组件"); }
缓存	可以将数据存储到本地缓存中，在需要的时候从缓存中取出即可。 1.localStorage和sessionStorage localStorage存储的数据会一直在浏览器本地存储，除非手动清除 sessionStorage存储的数据在浏览器关闭后就会清除。 localStorage只能存储字符串，任何格式的数据在存储的时候都会被自动转为字符串，所以读取的时候，需要进行类型的转换。 明。
Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态。 作用：进行统一的状态管理，解决不同组件共享数据的问题。 不同视图需要变更同一状态的问题。
Ref	利用ref函数获取组件中的标签元素，并且可以使用该标签元素的属性和方法 //例如: 让输入框自动获取焦点 <template>   <input type="text">---   <input type="text" ref="inputRef"> </template> <script lang="ts"> import { onMounted, ref } from 'vue' /* ref获取元素: 利用ref函数获取组件中的标签元素 功能需求: 让输入框自动获取焦点 */ export default {   setup() {     //声明一个 ref 来存放该元素的引用                    //必须和模板里的 ref 同名     const inputRef = ref<HTMLElement|null>(null)     onMounted(() => {       inputRef.value && inputRef.value.focus()     })     return {       inputRef     }   }, } </script>
事件总线	事件总线像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。事件总线多用于兄弟组件的通信。 触发事件 在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。 uni.$emit('update',{msg:'页面更新'}) 监听事件 uni.$on(eventName,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数 只监听一次 uni.$once(eventName,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。 移除监听 uni.$off([eventName, callback])

五、谈一谈对路由守卫的理解（谈理解，一般就是总分总，它是什么，用在哪，有什么用，怎么用，有什么注意事项，再结合项目说明更好）

路由守卫是路由在跳转前、后过程中的一些钩子函数，这些函数可以让你操作一些其他的事，在后台管理中设置权限时经常看到，在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作，如返回首页。

路由守卫分为：全局守卫，组件守卫，路由独享

#路由守卫参数：

to：目标路由对象

from：即将要离开的路由对象

next()：放行

1.全局守卫：所有的路由切换都会执行，一般写在路由配置文件中

router.beforeEach(fn) :to\from\next()

router.afterEach(fn):to\from

router.beforeResolve(fn):to\from\next()

2.组件守卫：

beforeRouteEnter(fn):to\from\next()    #在渲染该组件的对应路由被confirm前调用，不能获取组件实例，因此无法this

beforeRouteUpdate(fn):to\from\next()

beforeRouteLeave(fn):to\from\next()

3.路由独享守卫：一般写在路由配置中

beforeEnter(fn):to\from\next()

利用路由守卫实现 页面权限控制

router.beforeEach(function(to,from,next){
        if(to.matched.some(item=>item.meta.requiresAuth)){
            // 获取本地存储数据
            let userInfo = localStorage.getItem('userInfo') || {};
            try{
                userInfo = JSON.parse(userInfo)
            }catch(err){
                userInfo = {};
            }
            // 判断当前用户信息是否包含token
            if(userInfo.authorization){
                // 发起请求校验token的有效性
                request.get('/jwtverify',{
                    params:{
                        authorization:userInfo.authorization
                    }
                }).then(({data})=>{
                    if(data.code === 0){
                        next({
                            path:'/login',
                            query:{
                                // 跳转到登录页面，并传递目标页面路径
                                redirectTo:to.fullPath
                           }
                        });
                    }
               })
                next();
            }else{
                next({
                    path:'/login',
                    query:{
                        // 跳转到登录页面，并传递目标页面路径
                        redirectTo:to.fullPath
                   }
               });
            }
        }else{
            next();
        }
    });

六、谈一谈对Vuex的理解

什么是vuex?	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
为什么用vuex，解决了什么问题?	(1)行统一的状态管理，解决不同组件共享数据的问题。 (2)不同视图需要变更同一状态的问题。 (3)使用vuex之后，状态变化更加清晰。
怎么用?	1、安装引入 npm install vuex --save 2、注册到vue中 3、实例化vuex的store const store = new Vuex.Store({     state: {         count: 0,         title:'vuex中的title'     },     mutations: {         increment(state,count) {             state.count=count         }     } }) 4、挂载在vue实例上 5、在组件中就可以通过this.$store对vuex进行操作
核心概念	state: 状态的初始化 组件中去取state的值：   1、通过this.$store.state   2、可以通过计算属性取得,mapState辅助函数，可以简化操作 2、getters：对state中的数据进行初加工（派生）   取getters中的值:    1、通过this.$store.getters   2、通过计算属性取，getters也有辅助函数mapGetters， 用法和mapState一致。 3、mutations：修改state中的值，我们state每次变化，都应该由mutation去修改   调用mutations   1、this.$store.commit(‘mutation类型（函数名）’,“参数，参数一般是对象形式”)   2、his.$store.commit({type:‘mutation类型（函数名）’},…其他参数) mutation函数必须是同步的。 4、actions action类似于mutation   1、action可以包含异步操作   2、action不能直接修改state，如果想修改state的话，需要触发mutation 触发action    1、this.$store.dispatch(‘action名字’,‘参数’)   2、this.$store.dispatch({type:‘action类型（函数名）’},…其他参数) 5、modules   1、由于使用单一的状态树，项目中的状态会集中在一起，导致难以维护，这个时候可以通过module对store进行拆分。   2、使用module之后，每个模块都有自己的state、mutation等内容，方便维护

七、谈一谈对混入的理解

混入(mixins)分发vue组件中可以复用的功能 一个混入对象可以包含在任意的组件选项中（data,computed,methods等）当组件使用混入对象时,所有混入对象的选项将被混合进入该组件本身的选项

混入	混入分为全局混入和局部混入 局部混入只可以在当前组件内部使用 全局混入可以在任何组件中进行使用
局部混入	多个组件引入局部混入时,一个组件中改动了mixin中的数据,另一个引入了mixin的组件中的属性和方法是不会改变的
全局混入	在任何组件中都可以使用 需要挂载在顶级对象上 import {mixins} from "./mixins"//先引入封装的混入代码文件 Vue.mixin(mixins)//将引入的文件属性方法挂载到Vue的顶级对象上不同的组件混入是互相独立的
组件和混入的属性方法合并优先级	data数据冲突 mixin中的data数据和组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据 生命周期函数 这种不算冲突,生命周期函数的名称是固定的,先执行混入里的代码再执行组件中的代码 方法名冲突 在组件中调用该方法,调用的是组件中的方法
总结	优点： 提高代码复用性 只需要修改一个地方就可以 缺点： 命名冲突 滥用的话后期很难维护,排查问题不方便

八、谈一谈对插槽的理解

slot就是插槽，主要的作用就是拓展组件，在重复使用一个组件的时候可以通过少量的修改就达到复用的效果。分成默认插槽、具名插槽和作用域插槽。其中前两个都是元素在父组件中，拓展的结构也在父组件中，直接在子组件中占位，在父组件中添加结构即可，区别就是具名插槽给插槽取了名字，多个插槽存在时可以一一对应。

默认插槽	子组件用<slot>来标记渲染的位置，在父组件的自定义标签中写slot中的结构。如果在子组件的<slot>中写了结构，那么会作为默认显示的内容。
具名插槽	为每个slot标记名字，也是处理具有多个插槽时的对应关系   <div id='app'>         <login>             <template v-slot:footer>                 <div>                    footer                 </div>             </template>         </login>    </div>   <template id="login">        <!-- 模版里只能有一个根元素 -->        <div>           登录、注册           <slot name="footer"></slot>        </div>    </template>

九、什么是跨域，如何解决

什么是跨域（CORS） 首先跨域是由于浏览器的同源策略导致的，那什么是同源策略，同源就是指协议、域名、端口一致，如果这三个中的一个不同的话就会引起跨域问题

1. 通过 jquery 的 jsonp 形式解决跨域问题
2. 后端放开限制（非常不安全）
3. 配置代理

//配置代理
devServer: {
    //不设置 重写  http://wkt.myhope365.com/weChat
    //设置重写   http://wkt.myhope365.com
    proxy: {
        '/course-api': {         //代理名称,这里最好有一个
            target: 'https://course.myhope365.com/api',  // 后台接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/course-api':''//路径重写
            }
        }
    }
}

十、谈一谈封装请求的心得

（1）进行统一化管理，易于维护

（2）便于开发，提高开发效率

（3）规范代码