1.什么是vue的生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2.vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段？

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

4.第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪个周期中就已经完成？

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

6.生命周期钩子的一些使用方法：

1.beforecreate:可以在加个loading事件，在加载实例是触发
2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
3.mounted:挂载元素，获取到dom节点
4.updated:如果对数据统一处理，在这里写上相应函数
5.beforeDestroy:可以一个确认停止事件的确认框
6.nextTick:更新数据后立即操作dom

7.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建
使用频繁切换时用v-show,运行时较少改变时用v-if
V-if=’false’v-if是条件渲染，当false的时候不会渲染
使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成
v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

8.开发中常用的指令有哪些?

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html：更新元素的innerHTML
v-show与v-if：条件渲染，注意二者区别
v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
v-for：基于源数据多次渲染元素或模板
v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法
v-bind:title=”msg”简写：title=“msg”

9.绑定class的数组用法

1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”
2.数组方法v-bind:class="[class1,class2]"
3.行内v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳转方式

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

11.MVVM

M-model，model代表数据模型，也可以在model中定义数据修改和操作的业务逻辑

V-view,view代表UI组件，它负责将数据模型转化为UI展现出来

VM-viewmodel,viewmodel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步view和model的对象，连接model和view

12.computed和watch有什么区别

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算
computed适用于计算比较消耗性能的计算场景
watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行
小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13.vue组件的scoped属性的作用

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；
但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的；
解决办法：

①：使用混合型的css样式：（混合使用全局跟本地的样式）

14.vue是渐进式的框架的理解：(主张最少,没有多做职责之外的事)

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念
在我看来，渐进式代表的含义是：主张最少。视图模板引擎
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）
所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)

数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。
组件系统:点此查看

16.vue常用修饰符

修饰符分为：一般修饰符，事件修身符，按键、系统
①一般修饰符：

.lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步
<input v-model.lazy="msg" >  
.number<input v-model.number="age" type="number">
.trim

1.如果要自动过滤用户输入的首尾空白字符

<a v-on:click.stop="doThis"></a><!-- 阻止单击事件继续传播 --><form v-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重载页面 --><a v-on:click.stop.prevent="doThat"></a> <!-- 修饰符可以串联 --><form v-on:submit.prevent></form>   <!-- 只有修饰符 --><div v-on:click.capture="doThis">...</div>   <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --><div v-on:click.self="doThat">...</div>  <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --><a v-on:click.once="doThis"></a> <!-- 点击事件将只会触发一次 -->

③按键修饰符

全部的按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta<input v-on:keyup.enter="submit"> 或者 <input @keyup.enter="submit">

④系统修饰键 （可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

.ctrl
.alt
.shift
.meta<input @keyup.alt.67="clear"> 或者 <div @click.ctrl="doSomething">Do something</div><!-- Ctrl + Click -->

17.v-on可以监听多个方法吗？（可以的）

一个元素绑定多个事件的两种写法，一个事件绑定多个函数的两种写法，修饰符的使用。

<a style="cursor:default" v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething</a>
在method方法里面分别写两个时事件；
<button @click="a(),b()">点我ab</button>

18.vue事件中如何使用event对象

<button @click="Event($event)">事件对象</button>

19.比如你想让一个dom元素显示，然后下一步去获取这个元素的offsetWidth，最后你获取到的会是0。

因为你改变数据把show变成true,元素并不会立即显示，理所当然也不会获取到动态宽度。
正确的做法是先把元素show出来，在$nextTick去执行获取宽度的操作，不知道这样说会不会好理解一点。

openSubmenu() {
this.show = true //获取不到宽度
this.$nextTick(() => //这里才可以 let w = this.$refs.submenu.offsetWidth;
})
}

20.Vue 组件中 data 为什么必须是函数

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

21.vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
第三种都可以实现子组件调用父组件的方法，

<template><div><button @click="childMethod()">点击</button></div>
</template>
<script>export default {props: {fatherMethod: {type: Function,default: null}},methods: {childMethod() {if (this.fatherMethod) {this.fatherMethod();}}}};
</script>

22.vue等单页面应用及其优缺点

缺点：

不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。
优点：

无刷新体验,提升了用户体验；
前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端
用户体验好、快，内容的改变不需要重新加载整个页面。

23.什么是vue的计算属性computed

计算属性是需要复杂的逻辑，可以用方法method代替

computed:{totalPrice(){return (this.good.price*this.good.count)*this.discount+this.deliver;}}

24.vue-cli提供的几种脚手架模板

vue-cli 的脚手架项目模板有browserify 和 webpack；

25.组件中传递数据？

props：export default {
props: {message: String //定义传值的类型<br>},//或者props:["message"]data: {}父组件调用子组件的方法：父组件   this.$refs.yeluosen.childMethod()子组件向父组件传值并调用方法 $emit组件之间：bus==$emit+$on