vue问题
1.对SPA单页面的理解和优缺点。
spa(single-page-application)是指在初始化web应用时，就加载了html、javacript，css等，此后不会因为用户的操作加载和跳转，而且通过路由来来实现页面内容的变换，避免了重复加载。
优点：用户体验好，避免不必要的跳转和重复渲染，相对服务器压力比较小，前后端职责分离，前端交互逻辑，后端数据处理
缺点: 初次加载耗时长，为实现单页面应用需要统一加载javacript、css.部分页面按需加载.前进后退由路由管理，因为是一个页面显示所有内容，所以不能使用浏览器的前进退后功能，需要建立自己的堆栈管理。
2.v-show和v-if有啥区别
v-if是真正的条件渲染，是有惰性的，只有条件判断为true时才会渲染条件内的内容，为false则不会渲染。
v-show则不管怎么都会渲染，相对应的只是改变css中的display属性
总结：如果是频繁切换条件建议使用v-show，否则使用v-if.
3.Class 与Style如何动态绑定
Class可通过对象或者数据的手法进行绑定。
对象语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> </div> </body> <script> var Vm = new Vue({ el:'#app', data:{ isActive:true, hasError:false } }) </script> </html>
得到结果为：
<div class="static active"></div>
数组语法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> </body> <script> var Vm = new Vue({ el:'#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script> </html>
得到结果为：
<div class="active text-danger"></div>
Style也可以通过对象和数组进行动态绑定。
对象中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="styleObject">123</div> </div> </body> <script> var Vm = new Vue({ el:'#app', data: { styleObject:{ color: 'red', font-size: '25px' } } }) </script> </html>
得到结果：
<div style="color: red; font-size: 25px;">123</div>
数组中 v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">123</div> </div> </body> <script> var Vm = new Vue({ el:'#app', data: { baseStyles:{ fontSize: '25px', }, overridingStyles:{ color: 'red' } } }) </script> </html>
得到结果：
<div style="font-size: 25px; color: red;">123</div>
4.Vue生命周期得理解
https://www.cnblogs.com/yuliangbin/p/9348156.html
每个Vue实例都有一个完整的生命周期，从开始创建，初始化数据，挂载DOM --> 渲染，更新 --> 渲染卸载等。
一共有8个阶段：
1.beforeCreate:组件实例创建之初，初始化事件还没开始，组件属性生效之前。
2.created: 组件实例完全窗口，完成数据观测，属性和方法的运算等初始化，但是$el属性还不可用。
3.beforeMount:在挂载之前开始调用，相关的render函数首次被调用。实例已经编译模板，把data里面的数据和模板生成html,只是还没挂载html到页面上去。
4.mounted:el被新创建的vm.$el替换，并挂载到实例上去后调用。实例完成用编译后的模板替换el属性指向的DOM对象。完成模板中的html渲染到html页面中，此过程进行ajax交互。
5.beforeUpdate：在数据跟新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步渲染状态。不会触发重渲染过程。
6.update:在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件的DOM已经更新，所以可以执行依赖于DOM的操作，然而大多数应该避免在此期间执行更改状态操作，有可能会造成无限循环，注意-在服务器渲染时不执行该钩子。
7.beforeDestroy:在实例销毁前实例也可使用。
8.destroyed:在实例销毁之后调用。在此钩子下，所有的监听事件会被移除，所有子实例也会被销毁。同样在服务器渲染时不执行该钩子。
5.Vue父组件和子组件生命周期钩子函数执行顺序？
1.加载渲染过程
父beforeCreate ---> 父created ----> 父beforeMount ----> 子beforeCreate ----> 子created ----> 子beforeMount ---> 子mounted ----> 父mounted
2.子组件更新
父beforeUpdate ---> 子beforeUpdate ---> 子updated ---> 父updated
3.父组件更新
父beforeUpdate ---> 父updated
4.销毁过程
父beforeDestroy ---> 子beforeDestroy ----> 子destroyed ---> 父destroyed
6.keep-alive的理解
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素。
1）一般结合路由和动态组件一起使用，用于缓存组件。
2）提供include和exclude属性，两者都支持字符串或者正则表达式，include标识只有名称匹配的组件会被缓存，exclude表示只有与名称匹配的组件不会被缓存，其中exclude优先级比include高
3）对应两个钩子函数 actived和deaciveated，当组件被激活时，触发钩子函数activated，当组件被移除是，触发钩子函数deaciveated。
7.v-model的原理
在vue项目中主要使用v-model指令在表单input、textarea、select等元素创建双向数据绑定，我们知道v-model本质上不过是语法糖，，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
1—text和textarte元数使用value属性和input属性
2---checkbox和radio使用checked属性和change事件
3---select字段将value作为prop并将change作为事件
以 input 表单元素为例：
<input v-model='something'> 相当于 <input v-bind:value="something" v-on:input="something = $event.target.value">
如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：
父组件：
<ModelChild v-model="message"></ModelChild>
子组件：
<div>{{value}}</div>
props:{
value: String
},
methods: {
test1(){
this.$emit('input', '小红')
},
},
