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) => {undefined
if(from.path == “…从某个页面跳转…”) {undefined
if(confirm(‘编辑内容未保存，是否离开？’)) {undefined
next()
}else {undefined
next(false)
}
//1. next() 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirm的
//2. next(’/’) 或者next({path:’/’}) 跳转到一个不同的地址，当前的好行中断，然后进行一个新的导航
//3. next(false) 中断当前的导航
}else {undefined
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、如何在子组件中访问父组件的实例？
1：直接在子组件中通过this.p a r e n t . e v e n t 来 调 用 父 组 件 的 方 法 2 ： 在 子 组 件 里 用 parent.event来调用父组件的方法 2：在子组件里用parent.event来调用父组件的方法2：在子组件里用emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法

注：在子组件标签上加 ref属性如ref=“baseAlert”，在父组件通过this.$refs.baseAlert.子组件方法名。

15、watch的属性用箭头函数定义结果会怎么样？

this为undefined，原因是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this 将是 undefined。

16、 在.vue文件中style是必须的吗？那script是必须的吗？为什么？
在 .vue 文件中，template是必须的，而script与style都不是必须的。

17、vue自定义事件中父组件怎么接收子组件的多个参数？

this.$emit(“eventName”,data)
data 对象或数组都可以的。

18、说说你对vue的表单修饰符.lazy的理解

input标签v-model用lazy修饰之后，vue并不会立即监听input Value的改变，会在input失去焦点之后，才会触发input Value的改变

19、说说你对Object.defineProperty的理解

Object.defineProperty定义新属性或修改原有的属性；
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理。

20、vue组件会在什么时候下被销毁？
页面关闭、没有使用keep-alive时的路由切换。、v-if和改变key值

21、在vue中使用this应该注意哪些问题
vue 的data避免使用箭头函数
vue中methods中函数尽量不要使用箭头函数，会改变this指向，在vue-cli构建的项目中this会为undefined
生命周期的钩子函数不能使用箭头函数，否者this不能指向vue实例

22、template标签的作用
当做一个不可见的包裹元素，减少不必要的DOM元素，整个结构会更加清晰。

23、请描述下vue的生命周期是什么？

生命周期就是vue从开始创建到销毁的过程，
beforeCreate 组件创建之间
Created 组件创建以后
beforeMount 组件渲染之前
Mounted 组件渲染以后
beforeUpdate 组件更新之前
Updated 组件更新以后
beforeDetroy 组件摧毁之前
Destroyed 组件摧毁以后
Activated 组件激活 （配合keep-alive使用）
Deactivated 组件未激活（配合keep-alive使用）

24、 vue组件之间的通信都有哪些？

父传子: 子组件通过props方式接受
子传父：子组件发射一个事件e m i t , 父 组 件 接 受 事 件 以 后 调 用 相 应 的 函 数 非 父 子 : 使 用 一 个 空 的 V u e 对 象 在 第 一 个 组 件 的 点 击 事 件 中 ， 使 用 emit,父组件接受事件以后调用相应的函数 非父子:使用一个空的Vue对象在第一个组件的点击事件中，使用emit,父组件接受事件以后调用相应的函数非父子:使用一个空的Vue对象在第一个组件的点击事件中，使用emit方式来发射事件，在第二个组件的mounted函数里面使用$on来接收事件

25、 什么是虚拟DOM？
虚拟DOM是:用JS来模拟一颗 DOM 树,放在浏览器内存中
当你要改变时,虚拟 DOM 使用 diff 算法进行 新旧虚拟 dom 的比较，将修改了的更新到实际的 DOM 树,减少了 DOM 操作。

26、有使用过vue吗？说说你对vue的理解

Vue 是一套构建用户界面的渐进式框架。，通过API实现，响应的数据绑定和视图更新。

轻量级框架，Vue通过简洁的API提供高效的数据绑定和灵活的组件系统
实现了双向数据绑定，通过MVVM思想实现数据的双向绑定
实现了组件化、模块化开发。
27、SPA首屏加载速度慢的怎么解决？
1.通过Gzip压缩
2.使用路由懒加载
3.使用SSR渲染
4.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去，减小项目打包后的大小

28、删除数组用delete和Vue.delete有什么区别？

delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变，不能触发vue的响应式更新。
Vue.delete：直接删了数组成员，并改变了数组的键值，能触发vue的响应式更新。

29、动态给vue的data添加一个新的属性时会发生什么？怎样解决？
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性，
然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

30、组件和插件有什么区别？

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

31、说说你对选项el,template,render的理解

el: 把当前实例挂载在元素上
template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数
render: 不需要通过编译的可执行函数

32、v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if渲染很少一部分元素，也需要遍历同级的所有元素。

33、data为什么必须为函数

是为了阻止相同vue组件之间共享数据。确保每个组件独享一个数据对象，而不是共享一个数据对象

34、watch和 computed 的区别?
watch 为了监听某个响应数据的变化。没有缓存，只要从新渲染就会执行
computed 是自动监听依赖值的变化，从而动态返回内容。可以缓存，只有当缓存改变时才执行。、

35、MVC与MVVM的区别
MVC是后端的分层开发概念
MVVM是前端视图层的概念，主要关于视图层，分为M层、V层和VM层。
M为页面中要渲染的数据
V为页面中展示数据的DOM元素
VM是MVVM的核心，为调度者，通过双向绑定联系M与V层。当M层的数据发生改变时，会被VM自动渲染到页面中，当V层的数据发生改变时，VM层会自动将数据同步到M层中。

data—M层
el指定的区域—V层
new Vue得到的实例—VM层

36、模块化与组件化
模块化：是从代码角度分析，把可复用的代码，抽离为单独的模块
优势：提供了模块作用域的概念，防止全局变量污染。
           提高了代码的复用率，方便了成员之间的共存
组件化：是从UI角度分析，把页面中可复用的UI结构抽离为单独的组件。
优势：方便了Ui结构的重用
           随着项目的深入，手中可用的组件会越来越多
           可直接使用第三方封装好的库
           可以更专注于业务逻辑

37、过滤器
可用作一些常见的文本格式化，并不会修改原本的数据，只是在展示的时候做了一层包装。

过滤器的处理函数中，第一个形参已经被定，永远是管道符前面的值
传递参数从第二个开始
必须有返回值
可连续调用多个过滤器，以最后一个为结果
只可以在插值中或者v-bind中使用
如果全局过滤器和私有过滤器发生冲突，则就近原则

38、watch属性
监听指定数据的变化
场景：适合监听单个的、虚拟数据的变化，然后进行对应的操作。【监听url的变化】

39、computed计算属性
只要计算属性的function中所依赖的任何数据发生改变，则会触发计算属性的重新求值。如果第一次计算后数据没有再发生改变，则会把第一次的值缓存起来，这样可以提高性能。
包含get方法【外界要引用该值】和set方法【外界要重新为该值赋值】。

40、watch、computed和methods的区别
methods：表示一个具体的操作，主要书写业务逻辑。
watch：一个对象，键是需要观察的表达式，值是对应的回调函数。主要用于监听某些特定的数据变化，从而进行某些具体的业务逻辑上的操作，可以看作是methods和computed的结合。
computed：结果会被缓存，除非依赖响应式属性变化才会重新计算，主要当作属性使用。

41、ref与$refs
使用this.r e f s 获 取 D O M 元 素 和 组 件 r e f 被 用 来 给 元 素 和 组 件 注 册 信 息 ， 引 用 信 息 将 会 被 注 册 到 父 实 例 对 象 的 refs获取DOM元素和组件 ref被用来给元素和组件注册信息，引用信息将会被注册到父实例对象的refs获取DOM元素和组件ref被用来给元素和组件注册信息，引用信息将会被注册到父实例对象的refs中，普通的DOM元素则指向DOM元素，子组件的引用则会指向子组件的实例。
为组件添加ref引用可以调用组件中的方法。