# 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(); ... } return val } ... }) } 以上只保留了关键代码...

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，一个组件可以出现多个具名插槽。作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染...

5. Computed 和 Watch 的区别对于computed:支持缓存，只有依赖的数据发生变化了，才会重新计算不支持异步，当computed当中有异步操作的时候无法监听数据的变化computed的支会默认走缓存，计算属性是基于他们的响应式以来进行缓存的，基于data生命果的或者父组件传递的过来的props当中的数据进行计算如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed如果computed属性的属性值函数，那么默认使用computed●如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，...

data为什么是一个函数二不是对象Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。17. 对keep-alive的理解，它是如何实现的，具体缓存的是什么？如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。（1）keep-alivekeep-al...

使用 Object.defineProperty() 来进行数据劫持有什么缺点？在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。在 Vue3.0 中已经不使用这种方式了，而是通过使用 Proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的...