text: (window.webpackJsonp=window.webpackJsonp||[]).push([[33],{527:function(a,t,e){"use strict";e.r(t);var s=e(3),r=Object(s.a)({},(function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":a.$parent.slotKey}},[e("h2",{attrs:{id:"v-show和v-if的区别？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#v-show和v-if的区别？"}},[a._v("#")]),a._v(" v-show和v-if的区别？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("v-show通过css display控制显示和隐藏\nv-if组件真正的渲染和销毁,而不是显示和隐藏\n频繁的切换显示状态用v-show,否则用v-if\n")])])]),e("h2",{attrs:{id:"为何在v-for中用key？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#为何在v-for中用key？"}},[a._v("#")]),a._v(" 为何在v-for中用key？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("必须用key,且不能是index和随机数\ndiff算法中通过tag和key来判断,是否是sameNode\n减少渲染次数,提升渲染性能\n")])])]),e("h2",{attrs:{id:"vue组件如何通讯-常见？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vue组件如何通讯-常见？"}},[a._v("#")]),a._v(" vue组件如何通讯,常见？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("父子组件props和this.$emit\n自定义事件event.$on、event.$off、event.$emit // 总线bus\nvuex\n")])])]),e("h2",{attrs:{id:"双向数据绑定v-model的实现原理？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#双向数据绑定v-model的实现原理？"}},[a._v("#")]),a._v(" 双向数据绑定v-model的实现原理？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("input元素的value = this.name\n绑定input事件this.name = $event.target.value\ndata更新触发re-render\n")])])]),e("h2",{attrs:{id:"对mvvm的理解？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#对mvvm的理解？"}},[a._v("#")]),a._v(" 对MVVM的理解？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("M: Model层,即数据库\nV: View层,即视图层DOM\nVM: 即Vue\n")])])]),e("h2",{attrs:{id:"computed有何特点？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#computed有何特点？"}},[a._v("#")]),a._v(" computed有何特点？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("有缓存,data不变不会重新计算\n提高性能\n")])])]),e("h2",{attrs:{id:"为何组件data必须是一个函数？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#为何组件data必须是一个函数？"}},[a._v("#")]),a._v(" 为何组件data必须是一个函数？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("vue文件最后编译出来是一个class\n只有data是一个函数才能做到在不同的地方使用时data数据不共享\n")])])]),e("h2",{attrs:{id:"ajax请求应该放在哪个生命周期？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#ajax请求应该放在哪个生命周期？"}},[a._v("#")]),a._v(" ajax请求应该放在哪个生命周期？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("mounted\njs是单线程,ajax异步获取数据\n放在mounted之前是没有用的,只会让逻辑更加混乱\n")])])]),e("h2",{attrs:{id:"如何将组件所有props传递给子组件？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#如何将组件所有props传递给子组件？"}},[a._v("#")]),a._v(" 如何将组件所有props传递给子组件？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v('<组件名 v-bind="$props" />\n')])])]),e("h2",{attrs:{id:"多个组件有相同的逻辑-如何抽离？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#多个组件有相同的逻辑-如何抽离？"}},[a._v("#")]),a._v(" 多个组件有相同的逻辑,如何抽离？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  mixin\n")])])]),e("h2",{attrs:{id:"何时要使用异步组件？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#何时要使用异步组件？"}},[a._v("#")]),a._v(" 何时要使用异步组件？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  加载大组件\n  路由异步加载\n  优化性能\n")])])]),e("h2",{attrs:{id:"何时需要使用keep-alive？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#何时需要使用keep-alive？"}},[a._v("#")]),a._v(" 何时需要使用keep-alive？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  缓存组件,不需要重复渲染\n  如多个静态tab页的切换\n  优化性能\n")])])]),e("h2",{attrs:{id:"何时需要使用beforedestory？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#何时需要使用beforedestory？"}},[a._v("#")]),a._v(" 何时需要使用beforeDestory？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  解绑自定义事件evnet.$off\n  清除定时器\n  解绑自定义的DOM事件,如window.scroll等\n  vue事件会自动解除,自定义则需要自己解除\n")])])]),e("h2",{attrs:{id:"vuex中action和mutation有区别？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vuex中action和mutation有区别？"}},[a._v("#")]),a._v(" vuex中action和mutation有区别？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  action中处理异步,mutation不可以\n  mutation做原子操作\n  action可以整合多个mutation\n")])])]),e("h2",{attrs:{id:"vue-router常用的路由模式？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vue-router常用的路由模式？"}},[a._v("#")]),a._v(" vue-router常用的路由模式？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  hash默认\n  H5 history 需要服务端支持\n")])])]),e("h2",{attrs:{id:"如何配置vue-router异步加载？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#如何配置vue-router异步加载？"}},[a._v("#")]),a._v(" 如何配置vue-router异步加载？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  使用函数返回import\n  component: () => import('路径')\n")])])]),e("h2",{attrs:{id:"请用vnode描述一个dom结构？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#请用vnode描述一个dom结构？"}},[a._v("#")]),a._v(" 请用vnode描述一个DOM结构？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  看上面vdom\n")])])]),e("h2",{attrs:{id:"监听data变化的核心api是什么？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#监听data变化的核心api是什么？"}},[a._v("#")]),a._v(" 监听data变化的核心API是什么？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  Object.defineProperty\n  以及深度监听、监听数组\n  具体看上面响应式\n")])])]),e("h2",{attrs:{id:"vue如何监听数组变化？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vue如何监听数组变化？"}},[a._v("#")]),a._v(" vue如何监听数组变化？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  Object.defineProperty不能监听数组变化\n  重新定义原型,重写push、pop等方法,实现监听\n  具体看上面响应式\n")])])]),e("h2",{attrs:{id:"请描述响应式原理？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#请描述响应式原理？"}},[a._v("#")]),a._v(" 请描述响应式原理？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  监听data变化\n  组件渲染和更新的流程\n")])])]),e("h2",{attrs:{id:"diff算法的时间复杂度？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#diff算法的时间复杂度？"}},[a._v("#")]),a._v(" diff算法的时间复杂度？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  O(n)\n  在O(n^3)基础上做了一下调整\n")])])]),e("h2",{attrs:{id:"简述diff算法过程？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#简述diff算法过程？"}},[a._v("#")]),a._v(" 简述diff算法过程？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  patch(ele, vnode)和patch(oldVnode, newVnode)\n  patchVnode和addVnodes和removeVnodes\n  updatechildren // key的重要性\n")])])]),e("h2",{attrs:{id:"vue为何是异步渲染-nexttick何用？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vue为何是异步渲染-nexttick何用？"}},[a._v("#")]),a._v(" vue为何是异步渲染,$nextTick何用？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  异步渲染(以及合并data修改),以提高渲染性能\n  $nextTick在DOM更新完之后,触发回调\n")])])]),e("h2",{attrs:{id:"vue常见性能优化方式？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vue常见性能优化方式？"}},[a._v("#")]),a._v(" vue常见性能优化方式？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  合理使用v-show和v-if\n  合理使用computed\n  v-for时加key,以及避免和v-if同时使用\n  自定义事件、DOM事件及时销毁\n  合理使用异步组件\n  合理使用keep-alive\n  data层级不要太深\n  使用vue-loader在开发环境做模板编译 // 预编译\n  webpack层面的优化\n  前端通用的性能优化,如图片懒加载 // 具体看js的性能和安全\n  使用SSR\n")])])]),e("h2",{attrs:{id:"data状态设计和组件设计？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#data状态设计和组件设计？"}},[a._v("#")]),a._v(" data状态设计和组件设计？")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",[e("code",[a._v("  data状态设计:\n    用数据描述所有内容\n    数据要结构化,易于程序操作(遍历、查找)\n    数据要可扩展,以便增加新的功能\n  组件设计:\n    从功能上拆分层次\n    尽量让组件原子化\n    容器组件(只管理数据)\n    UI组件(只显示视图)\n")])])]),e("div",{staticClass:"custom-block tip"},[e("p",[a._v("作者：chenjie "),e("br"),a._v("\n链接：https://webchenjie.cn "),e("br"),a._v("\n来源：chenjieBlog")])])])}),[],!1,null,null,null);t.default=r.exports}}]);