vue常见面试题

最新推荐文章于 2024-06-01 16:31:18 发布

管理人

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量92

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52957570/article/details/128012921

版权

1.Vue常见的指令有哪些，有什么用

v-model   多用于表单元素双向数据绑定
v-bind   动态数据绑定，简写为冒号
v-on   事件绑定，简写为@
v-for   动态渲染
v-once   能执行一次性地插值，当数据再次改变时，插值处的内容不会更新
v-show   动态渲染元素的显示与隐藏
v-if   动态渲染和删除元素
v-else   和 v-if 搭配使用
v-else-if   同上
v-html   动态渲染节点的html内容，原内容会被覆盖，可以解析富文本
v-text   动态渲染节点的文本内容，原内容会被覆盖，不可以解析富文本

2.双向数据绑定的原理

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

3.路由的跳转和传参有哪几种方式

1.router-link标签

 不带参数
<div id='app'>
    <router-link to="/index" tag="div">去首页</router-link>
    <!-- 5.预留显示位置 -->
    <router-view></router-view>
  </div>

带参数
<router-link to="/index/login/personal?id=1&name=张三" tag="button">去个人中心页</router-link>

<router-link :to=`/index/login/personal/${id}/${name}` tag="button">去个人中心页</router-link>

<router-link :to="{name:'geren',params:{id,name}}" tag="button">去个人中心页</router-link>

2.$router方式跳转

this.$router.push('yourPath?code=123')，
this.$router.push({name:'home',params: {id:'1'}})

4.组件间的通讯方式有哪些

1、父子组件间传参：父传子：父组件通过自定义属性传递，子组件通过props接受。子传父：父组件自定义一个事件，子组件通过$emit绑定该事件并传参，父组件由函数的自带参数接受
2、全局事件总线eventBus：对于比较小型的项目大多使用$bus,传递参数的组件通过bus.$emit('事件名'，参数)传参，接收参数的组件通过Bus.$on('事件名', 参数 => {})接收
3、通过插槽传参
4、通过Vuex传参，使用state保存全局的数据，使用Getters、Mutations、Actions进行数据的处理和交流。首先在Mutations或者Actions定义一个函数，再通过this.$store.commit('函数名'，参数)对全局进行传参或修改
5、通过localStorage、sessionStorage参数
6、通过pubsub-js传参（基本不使用）

5.谈一谈对路由守卫的理解

路由守卫正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

路由守卫：在router里写router.beforeEach((to, from, next) => {if(to.meta.login){next('/') getUserInfo().then()}else {next()}}) ,to:去哪，form：来自哪，next：方法（下一次去哪,参是是路径）直接调用 next() 允许跳转，next(false) 不允许跳转，next('/index') 代表要跳转到首页

在路径中定义路由元数据meta{login = true}

6. 谈一谈你对Vuex的理解？

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，使用vuex可以进行统一的状态管理，解决不同组件共享数据的问题

Vuex有五大核心概念：

1.State ：提供唯一的公共数据源
2.Mutations ：用于变更state中的数据，必须是同步函数
3.Actions：用于变更state中的数据，但不能直接修改，需要通过context.commit()调用mutation，且可以包含任意的异步操作
4.Modules ：用于模块化导入其他store
5.Getter : Getter用于对 store 中的数据进行加工处理后形成新的数据，类似 Vue 中的计算属性。Getter不会修改store中的数据，而是起到一个包装的作用。Store 中的数据发生变化，Getter的数据也会跟着变化。

作用：Vuex解决了多组件之间状态共享的问题，组件间不用再把数据互相传来传去了，维护了单向数据流的简洁性。

7.谈一谈对混入的理解

混入是一种非常灵活的方式，用来分发Vue组件中可复用的功能，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有的混入对象的选项将被“混合”进入该组件本身的选项。

作用：提高代码复用性

优点：代码维护方便，复用率高，书写简洁。

8.谈一谈对插槽的理解

插槽：简单来说就是预留的一个位置，由父组件决定此处的内容
插槽有三种：默认插槽、具名插槽、作用域插槽。
<slot :自定义的名=data中的属性或对象></slot>
此外，插槽可以进行组件间的传参

9.什么是跨域，如何解决

跨域即受同源策略影响，两个页面资源之间的“协议+域名+端口”三者之中有任何一项不同即为跨域。（同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。）

如何解决跨域问题：

1.后台直接不做限制，放开所有请求。优点：方便；缺点：显而易见的不安全；

2.JSONP
基本原理：利用script标签的 src 不受同源策略限制，需要后端配合，已经不常用了

3.配置代理：Proxy
首先在项目根目录下创建一个vue.config.js文件，然后在其中添加以下代码

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