vue常见面试题

最新推荐文章于 2024-08-30 20:29:15 发布

m0_63349753

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量183

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63349753/article/details/128008406

版权

文章目录

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

v-cloak防止页面闪烁，
v-text：会替换掉元素里的内容，
v-html：可以渲染html界面，能解析富文本，
v-bind是界面元素属性值的绑定，可简写成：，
v-on是进行事件的绑定，可简写成@
V-for遍历数组，数字，对象，参数(item,key,index) in list(key 提高重排效率，key的值是唯一的，key只能是字符串或者数字，可以给他index的值)
v-if与v-show，显示隐藏元素
v-model双向数据绑定
2.双向数据绑定的原理

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

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

1 router-link标签

<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>

2$router方式跳转

this.$router.push('yourPath?code=123')，

this.$router.push({name:'home',params: {id:'1'}})

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

1：父传子，2：子传父，3：vuex全局，

4：eventBus事件总线

sayHello() {

            Bus.$emit('sayHello', 'hello');

        }

Bus.$on('sayHello', target => {

            console.log(target);  // => 'hello'

        });

5：缓存

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可以进行统一的状态管理，解决不同组件共享数据的问题

7.谈一谈对混入的理解

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

作用是提高代码复用性

8.谈一谈对插槽的理解

可以给同一个组件起不同的标题名

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

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制

同源策略:浏览器的一个安全协议，协议主机端口要保持一致，只要有一个不一致，就是跨域请求。

同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip)脚本和另一个域的

内容进行交互，是用于隔离潜在恶意文件的关键安全机制.当一个请求ur1的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

解决跨域

1.后台直接不做限制，放开所有请求。优点就是方便，缺点就是不安全2.JSONP原理:利用script标签不受同源策略，需要后端配合

3.配置代理

登陆鉴权 token cookie

配置代理写在vue.config.js文件里

//配置代理

devServer: {

        proxy: {

            '/api': {         //代理名称,这里最好有一个

                target: 'https://course.myhope365.com',  // 后台接口域名

                changeOrigin: true,  //是否跨域

                // pathRewrite:{

                //     '^/course-api':''//路径重写

                // }


            },

        }

    }