vue面试基础总结01
一、v-show 与 v-if 区别
1、区别
v-show：是css根据display属性来进行显隐切换。
v-if：是完整的销毁和重新创建。
2、使用
频繁切换时用v-show
运行时较少改变时用v-if
3、v-if=‘false’ v-if是条件渲染，当false的时候不会渲染.
当DOM元素有接口时候，v-if=true时候，会请求接口。
二、绑定动态属性 :class 的方法
1、行内
<div :style="{color:red}"> </div>
2、对象方法
<div :class="{active:isActive,'text-danger':isDanger}"> </div>
3、数组方法
<div :class="[activeClass, errorClass]"> </div>
三、计算属性computed和 watch 的区别（这个我还没懂）
https://segmentfault.com/a/1190000018630871
https://blog.csdn.net/smartdt/article/details/75557369?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
四、事件修饰符
在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次
五、组件中的data 为什么是函数,而new Vue 实例里，data 可以直接是一个对象
export default {
data(){
return {
}
}
}
因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离。
而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
六、keep-alive
// 缓存组件，用<keep-alive>组件包裹起来该组件
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
使用场景：（详细参考：https://juejin.im/post/5b2ce07ce51d45588a7dbf76）
1、Vue中前进刷新，后退缓存用户浏览数据
2、列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据
3、重新进入列表页面 => 获取最新的数据
七、路由的跳转方式
1.
2.另一种是编程是导航 也就是通过js跳转 比如 this.router.push('/home')
this.router.go('-1') 返回上一页
