10.对前端路由理解 在前端技术早期，一个 url 对应一个页面，如果要从 A 页面切换到 B 页面，那么必然伴随着页面的刷新。这个体验并不好，不过在最初也是无奈之举——用户只有在刷新页面的情况下，才可以重新去请求数据。 后来，改变发生了——Ajax 出现了，它允许人们在不刷新页面的情况下发起请求；与之共生的，还有“不刷新页面即可更新页面内容”这种需求。在这样的背景下，出现了 SPA（单页面应用）。 SPA极大地提升了用户体验，它允许页面在不刷新的情况下更新页面内容，使内容的切换更加流畅。但是在 SPA 诞生之初，人们并没有考虑到“定位”这个问题——在内容切换前后，页面的 URL 都是一样...

3. 如何获取页面的hash变化（1）监听$route的变化 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, （2）window.location.hash读取#值window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。# 4. $route 和$router 的区别●$route ...

43. v-if和v-for哪个优先级更高？如果同时出现，应如何优化？v-for优先于v-if被解析，如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环。如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项v-for要优先于v-if被解析，如果同时出现每次渲染都会先执行循环在进行判断条件，五路如何循环都不可以避免，浪费了性能要避免出现这种情况，则在外层嵌套template在这一层进行v-if判断，然后再内部进行v-for循环，如果条件出现在循环...

# template和jsx的有什么分别 对于 runtime 来说，只需要保证组件存在 render 函数即可，而有了预编译之后，只需要保证构建过程中生成 render 函数就可以。在 webpack 中，使用vue-loader编译.vue文件，内部依赖的vue-template-compiler模块，在 webpack 构建过程中，将template预编译成 render 函数。与 react 类似，在添加了jsx的语法糖解析器babel-plugin-transform-vue-jsx之后，就可以直接手写render函数。 所以，template和jsx的都是render的一种表现形式...

36. Vue的性能优化有哪些（1）编码阶段●尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher●v-if和v-for不能连用●如果需要使用v-for给每项元素绑定事件时使用事件代理●SPA 页面采用keep-alive缓存组件●在更多的情况下，使用v-if替代v-show●key保证唯一●使用路由懒加载、异步组件●防抖、节流●第三方模块按需导入●长列表滚动到可视区域动态加载●图片懒加载（2）SEO优化●预渲染●服务端渲染SSR（3）打包优化●压缩代码●Tree Shaking/Scope Hoisting●使用cdn加载第三方模块●多线程...

31. delete和Vue.delete删除数组的区别delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值32. vue如何监听对象或者数组某个属性的变化当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为Object.defineProperty()限制，监听不到变化。解决方式：this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value this.$set(this.arr, 0, "OBKoro1...

29. Vue的优点轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；●简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；●双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；●组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；●视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；●虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；●运行速...

27. Vue是如何收集依赖的？在初始化 Vue 的每个组件时，会对组件的 data 进行初始化，就会将由普通对象变成响应式对象，在这个过程中便会进行依赖收集的相关逻辑，如下所示∶ function defieneReactive (obj, key, val){ const dep = new Dep(); ... Object.defineProperty(obj, key, { ... get: function reactiveGetter () { if(Dep.target){ dep.depend(); .....

21. Vue 单页应用与多页应用的区别概念：●SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。●MPA多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。区别22. Vue template 到 render 的过程vue的模版编译过程主要如下：template -> ast -> r...

16. data为什么是一个函数而不是对象Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。如果使用对象形式定义data共用同一个data对象，那么状态变更就会影响所有的组件实例，这是不合理的，采用函数形式定义，在initData的时候会将其作为工厂函数返回全新的data对象，有效规避多实例之间状态污染问题，二...

18. $nextTick 原理及作用Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用javascript的这些异步回调任务队列来实现vue框架当中自己的异步回调队列nextTick 不仅是 Vue 内部的异步队列的调用方法，同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理nextT...

18. $nextTick 原理及作用Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用javascript的这些异步回调任务队列来实现vue框架当中自己的异步回调队列nextTick 不仅是 Vue 内部的异步队列的调用方法，同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理nextT...

10. 常见的事件修饰符及其作用once:只会触发一次.self只会触发自己范围内的时间，不包含子元素.capture:与事件冒泡方向相反，事件捕获由外箱内.prevent:等同于javascript当红的event.preventDefault，纺织预设的行为，如果事件可以取消，就取消事件，二不是停止事件的进一步传播11. v-if、v-show、v-html 的原理v-if调用addIfCondition方法生产vnode的时候会忽略对应的节点,redner的时候就不会渲染v-show会生产vnode,render的时候也会渲染成为真是的节点，只是在render过程中会在节点的属性中修改s...

7. slot是什么？有什么作用？原理是什么slot又名插槽，是vue内容分发机制，组件内部的模版引起shiyongslot元素作为承载内容分发的出口，插槽slot是子组件爱你一个模版标签，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。默认插槽：又称为匿名插槽当slot没有指定name属性值的时候一个默认显示的插槽，一个组件只有一个匿名插槽具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染...