面试知识-vue-1

1.v-if和v-show的区别？

1).v-show和v-if都是用来显示隐藏元素，v-if还有一个v-else配合使用，二者达到的效果都同样。

性能方面去有很大的区别：

2).v-show:无论条件是真仍是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。以后切换的时候，经过display: none;样式来显示隐藏元素。能够说只是改变css的样式，几乎不会影响什么性能。v-if:在首次渲染的时候，若是条件为假，什么也不操做，页面看成没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

3).性能方面v-if绝对是更消耗性能的，由于v-if在显示隐藏过程当中有DOM的添加和删除，v-show就简单多了，只是操做css。

4).由于v-show不管如何都会渲染，若是在一些场景下很难出现，那么使用v-if。若是是一些固定的，条件内容都不怎么会改变的，频繁切换的，使用v-show会比较省性能。若是是子组件，每次切换子组件不执行生命周期，使用v-show，若是子组件须要从新执行生命周期，那么使用v-if才能触发。

2.Vue生命周期

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

--------------------------

beforeCreate

实例组件刚建立，元素DOM和数据都尚未初始化，暂时不知道能在这个周期里面进行生命操做。

created

数据data已经初始化完成，方法也已经能够调用，可是DOM为渲染。在这个周期里面若是进行请求是能够改变数据并渲染，因为DOM未挂载，请求过多或者占用时间过长会致使页面线上空白。

beforeMount

DOM未完成挂载，数据也初始化完成，可是数据的双向绑定仍是显示{{}}，这是由于Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。

mounted

数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。通常请求会放在这个地方，由于这边请求改变数据以后恰好能渲染。

beforeUpdate

只要是页面数据改变了都会触发，数据更新以前，页面数据仍是原来的数据，当你请求赋值一个数据的时候会执行这个周期，若是没有数据改变不执行。

updated

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，由于页面更新数据的时候都会触发，在这里操做数据很影响性能和容易死循环。

beforeDestroy

这个周期是在组件销毁以前执行，在我项目开发中，以为这个其实有点相似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy没法阻止路由跳转，可是能够作一些路由离开的时候操做，由于这个周期里面还可使用data和method。好比一个倒计时组件，若是在路由跳转的时候没有清除，这个定时器仍是在的，这时候就能够在这个里面清除计时器。

Destroyed

说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，因此我会以为跟beforeDestroy是同样的。

3.vue的路由模式有：三种

Hash: 使用URL的hash值来做为路由。支持全部浏览器。（原理是onhashchange事件，url都会被浏览器记录下来，只能改变#后面的url片断）

History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式。（根据history api中的pushState,replaceState两个方法）（经过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，能够经过event.state取到这个state对象，从而能够对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态均可以存储到state的里面）

Abstract： 支持全部javascript运行模式。若是发现没有浏览器的API，路由会自动强制进入这个模式。

4.