Vue+网络协议+Webpack高频面试题

Vue

vue生命周期（重要）

对生命周期的理解(什么是vue生命周期，vue生命周期钩子，划分阶段)

Vue 实例从创建到销毁的过程，就是vue生命周期，vue生命周期钩子，在达到某一阶段或条件时去触发的函数，目的是完成一些动作或者事件

它可以总共分为8个阶段：创建前/后, 挂载前/后,更新前/后,销毁前/销毁后

create阶段：vue实例被创建

mount阶段： vue实例被挂载到真实DOM节点

update阶段：当vue实例里面的data数据变化时，触发组件重新渲染

destroy阶段：vue实例被销毁

第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM 渲染在 mounted 中就已经完成了

每个生命周期适合哪些场景？

1. beforeCreate在实例初始化之后，数据观测和事件配置之前被调用。
2. created在实例创建完成后被立即调用。
3. beforeMount在挂载开始之前被调用。
4. mounted : 挂载元素，获取到DOM节点 ajax操作是在mounted生命周期中完成的。（activated: keep-alive组件激活时调用）
5. beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。
6. updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
7. beforeDestroy实例销毁之前调用。
8. destroyed实例销段后调用。
   

data为什么用函数的方式写?
data是一个函数是因为每个组件实例需要有自己的独立的数据状态，避免数据污染和冲突。
假设在Vue应用中使用 两个标签时，Vue会自动创建该组件的两个实例person1和person2，如果data为对象时，当person1改变name时，person2也会被改变

vue生命周期在真实场景下的业务应用

created：初始化数据（ajax请求异步数据的请求）

mounted： 挂载元素，获取dom节点

nextTick： 针对单一事件更新数据后立即操作dom

updated： 任何数据的更新，做统一的业务逻辑处理

watch： 监听具体数据变化，并做相应的处理

created和mounted的区别（重点）

created：是在模板渲染成HTML之前调用的，此时data已经准备完毕，el仍是undefined，不能操作dom节点，主要用来初始化一些数据；

即使created中的方法没有执行完，mounted也会被调用

mounted：是在模板渲染成HTML之后调用的，此时data，el都已准备好，可以操作html的dom节点

什么是 MVVM？

MVVM是Model-View-ViewModel缩写,是一种基于前端开发的架构模式。Model代表数据，View代表视图，ViewModel视图模型是View和Model的桥梁，ViewModel是View和Model的桥梁，ViewModel会通过Data Binding（数据绑定）将model的改变渲染到视图中，会通过DOM Listener（DOM监听）监听view的变化更新数据。

双向数据绑定原理（重点）

双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。Vue中双向绑定使用v-model指令来实现标签内容的绑定.如表单元素和数据的双向绑定
原理：vue采用数据监听和发布者-订阅模式，通过Object.defineProperty()来劫持各个属性的setter和getter，当数据变动时候发布消息给订阅者，触发相应回调。

简答版本 ：当一个Vue实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 setter/getterr并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。

单向数据流props传递数据原则：单向数据流，只能父传子所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解
1.需要observer递归的遍历对象，包括对象的对象，给对象的某个值赋值或者改变，触发setter，那么监听到了数据的变化。

2.complie解析各个v-的操作指令，将模板的变量替换成数据，初始化页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦有数据变动，接收通知，更新视图。

3.watcher是observer和complie的桥梁，首先自身实例化向属性订阅器dep中添加自身，其次自身有一个update方法，在属性变动时，dep.notice()通知，调用自身的update方法，触发complie的回调。

Vue组件之间的的通信(传值)方式（重点）

父向子传值：子组件设置props + 父组件设置v-bind属性绑定

子向父传值： 子组件的$emit + 父组件设置v-on事件绑定

兄弟组件任意组件通信：通过事件车的方式传递数据, 新建一个空的全局Vue对象 EventBus，利用$emit发送 ， $on接收

v-show和v-if的区别（重点）

v-show指令是通过修改元素的display属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

开发中常用的指令有哪些

v-if：判断元素显示与隐藏；v-for：数据循环；v-bind:标签属性绑定；v-model：实现双向绑定 v-on事件绑定
v-if只有在为true的时候才会显示数据,v-if为true的时候执行if，否则，执行else

computed和watch有什么区别?（重点）

computed：计算属性，依赖其他属性，当其他属性改变的时候，下一次获取computed值时也会改变，computed的值会有缓存
watch：监听属性，监听具体数据变化，当数据属性变化时, 回调函数handler自动调用, 在函数内部进行计算

区别:

1. computed能完成的功能，watch都可以完成。watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
2. 当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed
3. 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

计算属性computed和方法的区别

• 计算属性是基于它们的依赖进行缓存,如果多次使用时，计算属性只会调用一次,性能上计算属性明显比methods好,如果依赖改变则重新缓存
• 方法不缓存

vuex的组成和原理（重点）

vuex 是什么？

vuex:全局状态（数据）管理机制，可以方便的实现组件之间数据的共享

vuex有哪几种属性？

有五种，分别是 State、Getter、Mutation、Action、Module

state：存储数据,所有共享的数据都要统一放到 Store 的 State 中进行存储，在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。

getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

mutation：用于变更 Store中的数据。

action：用于处理异步任务，通过提交 mutation 间接更变状态。

module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

Vuex 的好处

①能够在 vuex 中集中管理共享的数据，易于开发和后期维护

②能够高效地实现组件之间的数据共享，提高开发效率

③存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

vue.js中ajax请求代码应该写在组件的methods还是vuex的action中

ajax请求如果是公用，还是写在 vuex 的action 中，而私有 则 写在methods中。

如何让css只在当前组件中起作用

将当前组件的 (style)修改为(style scoped 组件私有) 通过ref标注DOM元素,通过$refs获取DOM元素

slot-scope='scope’本身父组件使用slot插槽是无法获取子组件的数据的，但是使用了slot-scope就可以获取到子组件的数据( 可以获取row, column, $index 和 store（table 内部的状态管理）的数据)

vue.nextTick()的用处？

nextTick 在DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM。

• 应用

  想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数

  在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM结构的时候才进行操作，需要用到nextTick

后端路由 前端路由 SPA（重点）

路由的本质就是对应关系，请求什么响应什么
后端路由根据不同的URL地址分发不同的服务器资源(URL 请求地址与服务器资源之间的对应关系)
前端路由本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。
SPA（Single Page Application）单页面应用程序：整个网站只有一个页面（只有一个.html文件），只有第一次会加载页面, 以后的每次请求，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）,只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

vue-router 路由模式（重点）