Vue的主要面试题

Vue的主要面试题

1、vue的生命周期是什么？作用是什么？有哪些事件钩子？

生命周期是vue实例从创建到销毁的过程。从开始创建、初始化数据、编译模板、挂载DOM—>渲染、更新->渲染、销毁等一系列过程，称之为Vue的生命周期。
作用：让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
一共包括八个事件钩子：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

2、页面第一次加载会触发那几个钩子？DOM渲染在哪个周期中就已经完成？

会触发beforeCreate、created、beforeMount、mounted四个钩子。DOM渲染在mounted中就已经完成了。

3、Vue实现数据(响应)的双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的s etter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。

4、Vue组件间的参数传递

1、父子组件之间传值：
父组件传给子组件：子组件通过props方法接受数据；
子组件传给父组件：$emit方法传递参数。
2、非父子组件之间传值和数据：
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件。项目比较小时，用这个比较合适。（同时用VueX也是可行的）

5、vuex是什么？怎么使用？哪种功能场景使用它？

1、VueX是状态管理器，只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事件；异步逻辑应该封装在action中。
2、使用：在main.js引入store，注入。新建了一个目录store，…export。
3、使用场景有:单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车…
state是存放共享资源和数据。
4、改变state中的数据只有在mutations中的方法，且mutations中的方法必须是同步的
如果要写异步的方法，需要写在actions中，并通过commit到mutations中进行state中数据的更改

6、对keep-alive 的了解？

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染。

7、vue的两个核心是什么？

数据驱动（保证数据和视图的一致性）、组件系统（应用类UI可以看做全部是由组件树构成的。）

8、vue几种常见的指令是？他们的作用是什么？

v-if：完整的销毁和重新创建
v-show：是css中的display属性的值的切换
v-for：属性值用于循环使用，同时只能通过特定的函数来刷新数据
v-bind：（缩写为：）用于绑定标签本身拥有的属性值的指令，比如a标签中的href属性，绑定一个vaule值。
v-on：为标签绑定事件（缩写为@），可以绑定多个方法
v-once：只绑定一次
v-model：主要用于绑定页面中的input标签输入的值//一般用双向绑定

9、vue常见的修饰符？

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

10、路由跳转的方式有哪些？

1、<router-link to='home'> router-link标签会渲染为<a>标签，咋填template中的跳转都是这种；
2、另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')

11、axios中使用jsonp的原因？怎样解决跨域问题？

axios受到同源策略的影响，不能发送跨域请求，而script标签中的src属性中的链接却可以调用跨域的js脚本，所以服务端不再接受json格式的数据。
而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
跨域：
1、通过jsonp把数据内填充起来
2、服务器代理，通过服务器的文件访问第三方资源
3、CORS方式（跨域资源共享），在后端配置可跨域

12、如何获取DOM？

在标签中设置ref属性：
例如：ref="domName"用法：this.$refs.domName得到整个DOM

13、vue-loader是什么？使用它的用途有哪些？

1、它是vue文件的一个加载器，将template/js/style转换成js模块
2、用途：js可以写ES6、style样式可以用是scss或者less。

14、为什么要使用Key？

因为需要是使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别这个节点。
作用：主要是为了高效的更新虚拟DOM。

15、watch和computed的区别？

Watch中的函数调用是不需要加()，component是需要加()，
Watch是监听属性，是通过监听属性的变化来改变的，component是计算属性，需要通过计算用return来返回最终结果。
使用场景：
1、当一条数据影响多条数据时，用watch，比如搜索。
2、一个属性收到多个属性影响时用computed，购物车