1、v-for和v-if同时出现，谁的优先级更高？
-
-
显然for的优先级高于if，因为genElement函数中，for比if更早判断
-
每次执行都会先循环然后判断条件，会导致性能浪费
-
解决方案：在for外嵌套一层if的判断，或者通过computed提前过滤好渲染列表
2、组件的data选项为什么必须是个函数而Vue的根实例则没有此限制
-
-
Vue组件会存在多个实例，使用对象定义data会导致其共用一个对象，会造成数据污染
-
根实例只会被创建一次，因此无须限制
-
源码上来看，组件实例会比根实例先定义，vm为undefined时，先判断了组件的data情况
3、vue中key的作用和工作原理
- key的作用是为了高效的更新虚拟dom，原理是在patch过程中，可以快速判断是否是同一个节点，避免频繁更新DOM元素，提升性能
- 动画过渡时如果不设置key，可能导致动画效果不触发的问题
4、如何理解Vue的diff算法
（源码太多了……暂时没想到有代表性的，具体可以看patch.js）
- what：diff算法是虚拟DOM技术的必然产物，通过对比新旧的VDOM，更新真实DOM
- why：每个组件对应一个watcher，通过diff才能找到变化的地方
- when：组件实例执行更新函数时，对比上一次渲染后的VNode和新的VNode，也叫patch
- how：深度优先，同层比较。首先假设首尾可能相同做4次同层对比，没有找到则循环遍历查找，可以借助key更高效的查找
5、如何理解Vue组件化
- what：组件是独立可复用的代码组织单元，可用来构建大型应用（官话）。Vue的组件是基于配置的，平时写的组件本质是组件的配置，通过vue-loader生成其构造函数，基于VueComponent，继承于Vue
- why：提升开发效率，应用的测试性和复用性
- how：组件的通信和拓展常用的有props，插槽，注册自定义方法。
- 其他：组件应该是高内聚低耦合的，Vue组件遵循单项数据流
6、Vue性能优化的方法
1、路由懒加载：
routes: [{ path: '/foo', component: () => import('./foo.vue') }]
2、keep-alive 缓存页面
3、对于渲染时间长的组件，使用v-show复用DOM(对比于v-if)
4、v-for遍历的同时，避免使用v-if
5、对于纯粹的数据展示，使用Object.freeze()阻止响应式
6、使用虚拟滚动列表，每次只渲染少量的数据
7、vue-lazyLoad对图片进行懒加载
8、第三方库按需加载
9、纯展示的无状态组件，可以标记为函数式组件
<template functional>{{ foo }}</template>
10、SSR
7、Vuex的理解
what：集中管理所有组件的状态，并保证状态以某种规则可预测的发生变化
why：解决多组件的状态共享的问题，以全局的单例模式进行管理，代码结构更易维护
should：如果没有大量的全局状态需要维护，其实并不需要用到
how：通过store实例state访问这些状态，通过mutation或者action更改状态
8、Vue-router中路由安全怎么实现
通过路由守卫，设置导航钩子函数，其中判断用户的登录态和权限，来达到保护路由的目的
具体实现：全局前置守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）、组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）
3种守卫区别：
- 作用范围
- 只有组件内守卫可以获取到组件实例
- 触发顺序不同
9、nextTick的理解
what：Vue.nextTick([callback, context])，在下次DOM更新后执行的延迟回调
why：vue的异步更新策略使得对数据的修改不会立刻更新到视图上，如果想立刻获取到dom状态，则需要调用该方法
how：Vue将开启一个队列(callbacks)，缓冲同一事件循环中发生的事件改变，用异步的timerFunc方法(Promise、MutationObserver、setImmediate、setTimeout)去调用，如果同一个watcher被多次触发，则只执行最后一次，从而避免对DOM的重复操作
10、Vue响应式的理解
what：可以检测到数据的变化，并且可以根据这个变化做出响应的机制
why：mvvm架构中需要解决数据层和视图层的连接，通过数据驱动，数据变化，视图更新
how：根据不同的类型做不同的处理，如果是对象则采用Object.defineProperty定义数据拦截，如果是数组，则通过覆盖数组原型的方法，扩展7个可以改变数组长度的方法，使得这些方法做额外的更新通知。可能存在的问题：递归初始化会导致性能损失；新增的属性需要$set特殊处理；对于Set、Map等新数据机构不支持
ToDo：使用Proxy机制代理响应数据，提高初始化性能和减少内存。Vue3中将其抽出为reactivity包，不依赖于Vue
