vue面试题（更新中）

1、在vue中created与activated有什么区别？

created():在实例创建完成后被立即调用，created()只会触发一次
activated()：是在路由设置时，才会有这个生命周期。在被 keep-alive 缓存的组件激活时调用。

2、在vue项目中scss scoped穿透符>>>无效的解决方案有哪些

可以使用 /deep/ 操作符( >>> 的别名)

3、为什么在v-for中的key不推荐使用随机数或者index呢？那要怎么使用才比较好呢？
因为在插入数据或者删除数据的时候，会导致后面的数据的key绑定的index变化，进而导致从新渲染，效率会降低
最好是唯一 的id值。key 的作用主要是为了高效的更新虚拟DOM
4、使用vue如何判断页面是否编辑及编辑页面未保存离开时，给出弹窗提示
router.beforeEach((to, from, next) => {
if(from.path == “…从某个页面跳转…”) {
if(confirm(‘编辑内容未保存，是否离开？’)) {
next()
}else {
next(false)
}
//1. next() 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirm的
//2. next(’/’) 或者next({path:’/’}) 跳转到一个不同的地址，当前的好行中断，然后进行一个新的导航
//3. next(false) 中断当前的导航
}else {
next()
}
})

5、预渲染和SSR(服务端渲染)有什么区别？
预渲染的使用场景更多是我们所说的静态页面的形式。

服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。

6、v-if和v-show哪个优先级更高？if>show
v-if:根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会添加相应元素到DOM中，支持加在<template>上面
v-show是根据表达式的值来显示或者隐藏元素，根据的是display的值
不支持加在<template>标签上

7、如何在全局使用axios的实例呢？

在main.js中导入axios，将axios挂载到Vue的原型对象上。
Vue.prototype.$http=axios

8、axios同时请求多个接口，如果当token过期时，怎么取消后面的请求？
axios的话可以使用cancelToken来实现。如果是原生的XMLhttprequest的话，需要使用abort()方法实现。
https://juejin.im/post/5d664634f265da03d42fb6dc

9、你知道v-model的原理吗？说说看

v-model是一个语法糖,真正的实现靠的还是
v-bind:绑定响应式数据
触发 input 事件 并传递数据 (核心和重点)

10、 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此 这三个都不能同名

11、vue中data的属性可以和methods中的方法同名吗？为什么？

肯定是不能同名的了
1、vue语法就会报错，
2、如果同名那么你在使用this.XXX的时候是调用方法还是调用变量呢

12、怎么解决vue打包后静态资源图片失效的问题？

找到config/index.js 配置文件，找build打包对象里的assetsPublicPath属性
默认值为/，更改为./

13、你知道style加scoped属性的用途和原理吗？

在标签上绑定了自定义属性，防止css全局污染，用/deep/也可以对组件内的样式进行覆盖

14、如何在子组件中访问父组件的实例？