一.Vue指令v-if和v-show的区别
相同点：它们都可以动态的操控dom元素的显示或隐藏
1.区别：
v-if：控制dom元素的显示或隐藏是将DOM元素整个添加或删除；
v-show：控制DOM的显示或隐藏是为DOM元素动态的添加css样式 display，设置成 block 或者 none DOM元素还是存在的。
2.性能对比
v-if：有着更高的切换消耗
v-show：有更高的初始渲染消耗
3.使用场景
v-if ：适合运营条件不大可能改变的场景；
在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致数据刚开始没有值，此时我们 页面也会进行渲染空数据就会报错。
我们可以把一个元素作为包装元素，并使用v-if 进行条件判断，如果有值，才会显示内部元素。最终的渲染不会包含这个 元素，v-show是不支持这么做的。
v-show：适合频繁切换
商品分类选项卡，频繁切换；
二 、vue生命周期
1、什么是vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
2、vue生命周期的作用是什么
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4、第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5、DOM 渲染在 哪个周期中就已经完成
DOM 渲染在 mounted 中就已经完成了。
6、简单描述每个周期具体适合哪些场？
生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom
三 、Vue的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
具体步骤：
第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步： Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
什么是setter、getter
对象有两种属性：
数据属性: 就是我们经常使用的属性
访问器属性: 也称存取器属性（存取器属性就是一组获取和设置值的函数）
什么是Object.defineProperty() ？
对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。
定义对象可以使用构造函数或字面量的形式：
除了以上添加属性的方式，还可以使用Object.defineProperty定义新属性或修改原有的属性；
语法：
Object.defineProperty(obj, prop, descriptor)
参数：
obj： 必需。目标对象；
prop： 必需。需定义或修改的属性的名字；
descriptor： 必需。目标属性所拥有的特性；
返回值：
传入函数的对象，即第一个参数obj；
四 、vue监听和深度监听watch
watch可以让我们监控一个值的变化，从而做出相应的反应。
<div id="app">
用户名：<input type="text" v-model='name'>
<p>你的名字是：{
{
name}}</p>
</div>
<!-- 引入vue -->
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
name:''
},
watch:{
//监控name属性
name(v1,v2){
//v1:当前数入的值
//v2:上一次输入的值
console.log(v1,v2)
}
}
})
</script>
通过watch属性可以监控data属性中name值的变化，定义监控时，name这个值对应的是一个监控处理函数name()。
将name属性和对话框绑定，并在对应页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框中输入值的变化而变化。
其中监控处理函数name有两个参数：
v1表示当前监控的值。
v2表示上一次监控的值。
如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化：
<div id="app">
用户名：<input type="text" v-model='person.name'>
<button @click='person.age++'>+</button>
<p>你的名字是：{
{
person.name}}</p>
<p>你的年龄是：{
{
person.age}}</p>
</div>
<!-- 引入vue -->
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
person:{
name:'',
age:18
}
},
watch:{
//监控name属性
person:{
deep:true, //开启深度监听
handler(v){
console.log(v.namge,v.age)
}
}
}
})
</script>
现在定义监控时，person是一个对象，并且要指定两个属性：
deep：代表深度监控，不仅监控person变化，也监控person中属性变化。
handler：就是以前的监控处理函数。
通过v.name和v.age获取对象中具体的值。
五 、 v-for中为何要使用key
一、Key是什么
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
当我们在使用v-for时，需要给单元加上key
- 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
- 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed