vue—面试题1

1.vue的生命周期

vue的生命周期主要分为几个简单部分：数据初始化，dom挂载，数据更新，组件写卸载。在一个，就是开启组件缓存的时候，会有组件启用和组件停用阶段。

数据初始化阶段

beforeCreate：再实例初始化以后，数据观测（data observer）和event/watcher事件配置以前调用

created：实力已经建立完成以后调用，在这一步，实例已完成如下配置：数据观测，属性和方法的运算，event/watcher时间回调。然而，挂载还没开始，$el属性目前不可见。

dom挂载阶段

beforeMount：在挂载开始以前调用：相关的render函数首次被调用

mounted：el被新建立的vm.$el替换并挂载到实例上去以后调用该钩子函数。若是root挂在了以文档内元素，当mounted被调用时vm.$el也在文档内。

mounted不会承诺全部子组件也都一块儿被挂载。若是但愿等到整个视图都渲染完毕，能够用vm.$nextTick替换掉mounted

数据更新阶段

beforeUpdate：数据更新时调用，发生虚拟dom重渲染和打补丁以前。

updated：因为数据更新致使虚拟dom重渲染和打补丁，在这以后调用该钩子。

当这个钩子被调用时，组件dom已经更新，因此如今能够执行依赖于dom的操做，然而在大多数状况下，应该在此期间更新状态。若是要相应状态改变，一般最好使用计算属性或watcher取而代之。

updated不会承诺全部子组件也都一块儿被重绘，若是但愿等到整个视图重回完毕，能够用vm.$nextTick替换update；

缓存启用时会用两个钩子函数：

activated：keep-alive组件激活时调用

deactivated：keep-alive组件停用时调用

组件卸载阶段

beforeDestroy:实例销毁以前调用。在这一步，实例彻底可用。

destroyed：vue实例销毁时调用。调用后，vue实例指示的全部东西都会解除绑定，全部事件监听器会被移出，全部的子实例也会被销毁。

2.vue实现数据双向绑定的原理

vue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应监听回调。

具体就是经过Object.defineProperty()，中的setter，getter来监听属性变更实现Observer进行数据的监听而后就是通知订阅者，订阅者其实就是一个简单的数组，这个数组中的内容就是咱们使用的一个数据集合，使用了的数据能够经过getter获得，其实就是在调用的时候给数组添加一个订阅者，这样就实现了一个watcher（须要监听数据的集合），而后实现一个compile，其做用就是解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应节点绑定更新数据，添加监听数据的订阅者，一旦数据有变更，收到通知，更新数据，其实vue的数据双向绑定就是MVVM做为数据绑定的入口，整合Observer，Compile和Watcher三者，经过Observer来监听本身的model的数据变化，经过Compile来解析编译模板指令，最终利用watcher搭起observer和Compile之间的通讯桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变动双向绑定效果。

3.vue路由实现原理

路由的实现有两种：hash和history interface来实现前端路由，

hash在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特色：

（1）hash虽然在URL中，但不被包括在HTTP请求中

（2）用来指导浏览器动做，对服务端安全无用，hash不会重加载页面

history采用h5的新特性；且提供了两个新方法：pushState（），replaceState（）能够对浏览器历史记录栈进行修改，以及popState事件的监听到状态变动，不过history有个问题是：若是用户直接在地址栏中输入并回车，浏览器重启或从新加载时，history模式会将url修改的和正常请求后端同样，此状况下，从新向后端发送请求，后端若是没有配置对应路由处理，则返回404，解决方法是后端配置一下。

4.vue路由传参

<router-link :to="{path:'/index',params：{id:num}}">
<router-link :to="{ path:'/index' , query:{id:num}}"

而后经过$route.params来读取数据，但路由传递参数值是对象的话就不行了会报错，传递前用base64转译一下就能够。

5.如何让css只在当前组件起做用

在style标签中写入scoped便可

如：<style scoped></style>

6.watch，computed，methods的区别

watch是作单一的数据监听，方法名要与监听数据名相同，不须要返回值，能够获得修改前与修改后的值

computed与methods基本相同，都是方法，都是在数据改变的时候，若是方法内部有该数据依赖，都是自动执行。

computed 是计算属性，methods是放操做方法

computed调用不须要加（），methods要加（）

computed会将计算值进行缓存，若是内部依赖值没有发生变化，无论调用多少次，都只执行一次，methods则是调用多少次，则执行多少次。

7.组件划分

按照页面的框架来划分，将页面中的每一块均可以划分为一个组件，而后从中提取公共组件，通常状况下，都是分为页面组件和公共组件。

8.vue路由的钩子函数

官方称为导航首位能够控制导航跳转，beforeEach，afterEach等，通常用于页面title的修改。一些须要登陆才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转。

9.$route和$router的区别

$route是“路由信息对象”，包含了path，params，query，hash，fullPath，matched，name这些路由信息参数

而$router是“路由实例”对象包含了路由的一些跳转方法，钩子函数等

10.key的使用

通常状况下，vue在渲染完成后，若是数据发生变化，只会从新渲染数据，不会从新渲染整个元素，可是有时候咱们须要元素被从新渲染，此时就须要使用key关键字，使用v-bind绑定key关键字，能够实如今数据发生变化时候从新渲染整个元素。注：同一父级元素下全部子元素若是都要在数据变化后从新渲染元素，则须要被绑定的key