君子终日乾乾，夕惕若，厉无咎。
1：什么是MVVM？它和MVC还有MVP有什么区别？
它们都是以视图层、数据模型层、业务逻辑层的方式来组织代码的一种软件设计风格。分层有助于管理复杂的应用，你可以在一个时间内关注一个方面，如在不依赖业务逻辑的情况专注于视图层的开发设计，更有利于调试，测试等。
演变历史：MVC => MVP => MVVM
MVC：
M：model 数据模型层
V：view 视图层
C：controller 控制器（业务逻辑层）
过程：视图层（View）将用户的输入等交互动作得到信息传递给控制器(Controller)，由控制器处理具体的业务逻辑，然后将数据发送给模型(Model)。模型层操作数据库然后将新的数据返回给视图层。
MVP：
M：model 数据模型层
V：view 视图层
P：presenter 播报员（相当于MVC中的C，业务逻辑层）
过程：模型层(model)和视图层(view)并不直接进行交接，所有过程都通过中间人presenter来进行播报通信，preserter与view以及与model之前的通信都是双向的。
MVVM：
M：model 数据模型层
V：view 视图层
VM：viewModel（相当于MVP中的P，业务逻辑层）
过程：和MVP唯一的区别是，视图层和ViewModel层是双向数据绑定，视图层和ViewModel任何一方有变动都会直接反应在对方身上。
2：组件之间是怎么通信的？
1：子组件访问父组件
this.$parent
props传递
2：父组件访问子组件
自定义监听事件，父组件负责监听，子组件负责触发并将信息通过事件回调函数参数的形式返回。
ref $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
3：祖先与子孙通信
$parent层层连接
依赖注入
借助vuex状态管理
3：说说v-show和v-if的区别？
v-if是真正的条件渲染，有组件销毁重建的完整过程，有更好的切换开销。同时v-if是惰性的，如果一开始v-if的值为false,它什么也不会做，知道值变为true才开始创建组件。
v-show一开始就会把所有的组件加载进来 ，只是单纯的切换css样式。所以它拥有更高的初始渲染开销。
根据具体情况决定用哪个更好，如果你有高频切换组件的可能就使用v-show好了，如果是切换频率并不高，就考虑用v-if。
4：如何使CSS只在当前组件有用？
1：<style scoped></style>
2：<style module></style>
对于组件库，我们应该更倾向于选用基于 class 的策略而不是 scoped attribute。
这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
5：<keep-alive></keep-alive>有什么用？
包裹动态组件，缓存不活动的组件，保留组件状态，避免不必要的重新渲染。
6：Vue中如何实现动态加载组件？或者说如何实现组件异步加载？
也就是懒加载。
Vue允许你以工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在需要这个组件的时候才会触发这个工厂函数，且会把结果缓存起来供未来重新渲染。
与require()语法结合起来用，这个语法会告诉webpack自动将该引入的组件进行代码切割
返回一个promise，也就是() => import()
该工厂函数还可以返回如下格式的对象，可以定义组件未加载时的loading，以及加载失败的优雅降级等。
7：如何在Vue项目中实现图片懒加载？
使用插件vue-lazyload
8：为什么要用key来管理可复用元素？
保持两个相同元素的独立性。
因为在Vue中为了尽可能的高效渲染，它通常会复用已有的相同元素。
但这对于两个完全独立的相同元素来说是不科学的，所以加上key保证他们的独立性。相互不被彼此牵制干扰。
9：为什么不建议v-for和v-if用在同一个元素上？
因为v-for拥有更好的优先级，造成不必要的循环遍历，浪费资源影响性能。
可以先在computed中过滤数据后在做遍历。
或者将v-if移到容器类，这样就不会每次v-if都遍历完对象的所有值。
10：什么是mint-ui?
mint-ui 是vue移动端组件库。
11：Vue双向数据绑定的原理是什么？
其原理就是数据劫持结合发布者-订阅者模式来更新视图和数据。
通过Object.defineProperty()中的setter、getter劫持数据，然后通知订阅者数据变化，订阅者执行更新函数更新视图。
主要实现过程：
1：实现一个Observer劫持监听器，劫持数据监听变化，然后通知订阅器。
2：实现一个Watcher订阅者，订阅器Dep收到数据变化后会通知Watcher，Watcher调用自身的update()触发Compile中绑定的回调，更新视图。
3：实现一个解析器Compile，解析编译模板指令，初始化渲染视图，并为每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
4：MVVM数据绑定入口，整合Observer、Watcher、Compile三者。
12：谈谈Vue的生命周期，有哪些钩子？
主要有四个阶段吧
1：实例创建阶段，初始化事件和生命周期
钩子：beforeCreate 、created
2：实例挂载阶段
钩子：beforeMount 、mounted
3：数据更新阶段
钩子：beforeUpdate 、updated
4：调用了vm.$destroy() 销毁阶段
钩子：beforeDestroy 、destroyed
13：Vue如何实现自定义指令？
自定义指令时可用的5个钩子
1：bind 一次性初始化设置，只调用一次，指令第一次绑定到元素时调用。
2：inserted 被绑定元素插入父节点时调用（仅保证父节点存在，并不代表就一定插入文档中了）
3：update 所在组件VNode更新时调用，可能发生在其子节点更新前。
4：componentUpdated 所在组件VNode及其子节点VNode更新完毕后调用。
5：unbind 只调用一次，在元素与指令解绑的时候调用。
14：Vue-router有哪些组件？
<router-view/> 、<router-link/>
15：Vue-router动态路由匹配怎么实现？
路径配置的时候使用“动态路径参数”来实现。
如：/user/:id 这样/user/foo和user/bar都会匹配到/user这个页面。同时我们也可以通过this.$route.params.id获取foo和bar这两个值。
16：active-class是Vue-router中哪个组件的属性？有什么作用？
<router-link/>上边的属性
用于定义链接点击激活时的CSS样式。
17：在Vue-router中如何实现嵌套路由？
一级路由下边设置children属性配置子路由
18: 说说Vue-router的导航守卫，有哪些钩子？
完整的导航解析流程：
1：导航被触发
2：在失活的组件里调用离开守卫beforeRouteLeave
3：调用全局的前置守卫beforeEach
4：再重用的组件里调用beforeRouteUpdate守卫
5：在路由配置里调用beforeEnter
6：解析异步路由组件
7：在被激活的组件里面调用beforeRouteEnter
8：调用全局的beforeResolve
9：导航被确认
10：调用全局的afterEach （所有钩子中只有它没有next参数）
11：触发DOM更新
12：用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
网友评论