v-show与v-if的区别
1.v-show只是css级别的display属性none和block之间的切换。而v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
2.v-show一般用在操作比较频繁的地方，v-if用在运行时条件很少改变的地方。
3.v-if="false"时，内部组件不会渲染，可以利用这个合理渲染重要的内容。或者和v-else，v-else-if一起使用。
绑定class的数组用法
一般绑定class对象的用法如下
<div v-bind:class="{ active: isActive }"></div>
当isActive为true时，class="active"
你可以在对象中传入更多属性来动态切换多个 class,v-bind:class可以和普通的class共存
<div
class=”static“
v-bind:class="{ active: isActive,text-danger:hasError }">
</div>
data{
isActive:true,
hasError:false
}
那渲染结果为<div class="static active"></div>
数组的用法
<div v-bind:class="[ activeClass,errorClass ]"></div>
data{
activeClass:'active',
errorClass:'text-danger'
}
渲染为
<div class="active text-danger">
想根据条件切换数组中的class
可以用三元表达式：
<div v-bind:class=[isActive?activeClass:'',errorClass]>
这样会始终添加errorClass，只有当isActive为true时添加activeClass
在数组语法中也可以使用对象语法：
<div v-bind:class=[{active:isActive},errorClass]>
计算属性和watch的区别
计算属性是自动监听，依赖值的变化，从而动态返回内容。
如果我们还需要动态值，那就用计算属性；需要知道值改变之后执行的逻辑，就用watch
补充：
1.computed是一个对象的时候，有get和set两个选项。
2.methons是一个方法，可以接受参数，computed可以缓存。
3.computed可以依赖其他的computed，甚至是其他组件的data。
4.watch是一个对象的时候，有handler（执行的函数），deep（是否深度），immediate（是否立即执行）等常用选项。
事件修饰符
<!--ctrl按下时触发，即使Alt或Shift被一同按下也会触发-->
<button @click.ctrl="onClick">B</button>
<!-- 有且只有ctrl被按下时触发-->
<button @click.ctrl.exact="onClick">B</button>
<!-- 没有任何修饰符被按下时触发-->
<button @click.exact="onClick">B</button>
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>
<!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
组件中的data为什么是函数
因为组件使用来复用的，JS里对象是引用关系，这样作用域没有隔离
而new Vue的实例是不会被复用的，因此不存在引用对象的问题。
Keep-alive内置组件
Props：
1.include 字符串或正则表达式，匹配的组件会被缓存
2.exclude 与上面相反
3.max。数字，最大可以缓存多少组件实例。
用法：
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，和<transition>一样，它是一个抽象组件，不会渲染出一个DOM元素，也不会出现在父组件链中。
当组件在<keep-alive>内被切换，它的activated和 deactivate 这两个生命周期钩子函数将会被对应执行。
主要用于保留组件状态或避免重新渲染。
<!-- 基本 -->
<keep-alive> <component :is="view"></component> </keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<trans