一、vue基础知识vue实现双向绑定原理1、Object.defineProperty()中的set/get设置属性值/获取属性值2、ProcessObserver劫持监听所有属性变化，通知Dep观察者（updatefunction)Watcher负责将对应的updatefunctionCompile添加到观察者列表中。编译、编译、解析、初始化/更新vue生命周期中的数据和方法beforeCreate数据和方法还没有被初始化。createddata和方法尚未初始化。挂载页面已挂载，可操作DOMbeforeUpdate页面数据是旧的，数据数据是新的，页面和最新的数据还没有同步更新页面和数据已经保持最新，之前Destory进入销毁阶段，数据，方法。..也可以使用销毁的组件已经完全销毁，数据，方法和过滤器，指令不可用vue组件通信父子通信父组件绑定属性":data-attr"数据子组件接收驼峰式dataAttr数据子-与父子组件通信$emit('to-parent',newMsg)绑定属性传递数据父组件绑定@to-parent="getChildren(e)"属性接收数据兄弟通信在main.js中构建一个Vue.prototypeborther1中的.bus事件总线（中间层），borther2中接收到this.bus.$emit('propertytoborther2',value)，this.bus.$on('toborther2',function(val){that.msg=val})vue的虚拟DOMvirtualDOM的出现是为了减少频繁的大规模重绘带来的性能问题。虚拟dom和真实dom的区别1.虚拟dom不会排版重绘2.真实dom频繁排版重绘效率很低。3、虚拟dom被频繁修改。然后一次性在真实dom中对比修改需要改动的部分，最后在真实dom中进行排版重绘，减少过多dom节点排版重绘的损失4.虚拟dom可以有效减少大-区域重绘排版，因为最终和真正的DOM不同，所以只能渲染局部DOM。Diff是指通过Diff算法比较虚拟DOM的变化。DOM2.当虚拟DOM中某个节点的数据发生变化时，会生成一个新的Vnode。3.Vnode和oldVnode将进行比较。如果有区别，直接修改真实DOM，然后让oldVnode的值为Vnode路由的全局路由。intercept(routeguard)router.beforeEach((to,from,next)=>{})//跳转前to：要进入的目标（路由对象）from：当前导航next即将离开的路由()进行一个钩子，next(false)中断当前导航。如果此时URL发生变化，则重新设置为from之后的路由地址。next('/')next(path:'/')终止当前导航并跳转到不同的地址，next(error)如果参数是错误实例，导航将终止beforeResolve((to,from,next)=>{})//跳转成功afterEach((to,from,next)=>{})//跳转后本地路由拦截路由内部hook:beforeEnter((to,from,next)=>{}){})componentinternalhookbeforeRouteEnter((to,from,next)=>{})//fromanotherhook在组件进入组件之前触发beforeRouteUpdate((to,from,next)=>{})//相同的组件，不同的参数，不同的数据beforeRouteLeave((to,from,next)=>{})//当组件离开并跳转到另一个组件时会触发这个钩子。路由参数this.$router.push({path:/Re/${id}})this.$router.push({name:'Re',params:{id:id}})this.$router.push({path:'/Re',query:{id:id}})vuexstate定义共享变量mutations同步修改共享变量（改变状态，提交mutation）action可以提交mutations并在action中执行store.commitgetter计算属性Howto解决单页SEO问题prerender-spa-pluginSSR定义服务器端渲染。当用户请求网页时，后端首先调用数据库。获取到数据后，将数据和页面元素拼接在一起，形成一个完整的html页面，然后直接返回给浏览器。优点1.更好的SEO，因为搜索引擎爬虫可以查看呈现的页面2.更快的内容到达时间，特别是对于慢速网络条件或慢速设备缺点1.对构建设置和部署的更多要求2.更多服务器终端负载Nuxt.js2.微信小程序基础目录app.js系统方法处理文件，主要处理程序声明周期的一些方法app.json路由地址，全局配置，导航头颜色，名称app.wxss全局界面样式项目.config.json控制版本小程序，appidsitemap.json用于配置小程序及其页面是否允许微信收录。onReady监控页面第一次渲染完成。onHide监控页面隐藏。onUnload监控页面卸载。应用生命周期被卸载。onLaunch监控小程序被初始化并且只被触发一次。并关闭所有其他非tabBar页面wx.reLaunch关闭所有页面，在应用程序中打开一个页面wx.redirectTo关闭当前页面，跳转到应用程序中的一个页面，不允许tabbar页面wx.navigateTo保存当前页面，andredirects转到应用中的某个页面，不能跳转到tabbar页面，最多有十层页面栈wx.navigateBack关闭当前页面，返回上一页或多级页面页面传递数据的方法url传参1、wx.navigateTo({url:'../list/list?username='+this.data.username})2.wx.redirectTo3.wx.reLaunch本地缓存wx.setStorageSync('username',this.data.username)app在全局变量appjs.globalData对象中新增属性的基本原理双线程通信方式view视图层：渲染页面结构1、初始化状态2、首次渲染状态3、连续渲染状态End通过JSBridage与AppService通信逻辑层：用于逻辑处理、数据请求、接口调用1、初始化状态：onLoad（只执行一次）、onShow（每次切换时执行）2、等待激活状态：收到“接口”线程初始化完成”信号，将初始化数据发送给“界面线程”，等待界面线程完成初始渲染js对象模拟DOM2，比较两棵DOM树3，比较两棵DOM树的差异4，将差异应用到真正的DOM树数据请求封装在utils包中wx.request请求组件引入应用提高应用速度的方法提高页面加载速度用户行为预测减少默认数据大小组件化方案双向绑定this.setData({})bindinput绑定事件方法、监控变化3.js基础知识原型、原型链函数对象所有的函数原型（显式原型）函数、数组、对象都有__proto__（隐式原型）原型对象。具有原型属性的对象是在定义函数时创建的。Constructors构造函数有自己的方法，也有显式的原型方法，即实例继承构造函数的方法原型链（找属性，在??__proto__中找，通过__proto__形成原型链）prototypeprotoconstructor继承意义发生在对象和方法之间原型构造函数（子构造函数原型继承父构造函数Prototype方法）申请，调用借调构造函数示例：functionFn(name,age){this.name=name;这个年龄=20；}functionSon(name,age,sex){Fn.call(this,name,age);这。性别=性别；}功能Son2(姓名、年龄、性别){Fn.apply(this,arguments);this.sex=性别；}vars1=newSon("李四",20,"男");控制台日志（s1）；//son:{name:"李四",age:20,sex:"男"}vars1=newSon2("张三",29,"女");控制台日志（s2）；//son:{name:"张三",age:29,sex:"女"}闭包的意思就是可以读取其他函数内部变量的函数函数。好处1.保护函数中变量的安全，防止命名冲突2.内存维护可以缓存一个变量3.匿名自执行函数可以减少内部摩擦。缺点1.增加内部消耗，造成内存泄漏2.关闭跨域访问，导致性能损失跨域的意思协议、域名、端口有区别就是跨域解决跨域1、CORS跨-源端通信：浏览器和服务端都支持，浏览器IE不能低于IE10，前端正常ajax请求，需要服务端实现CORS接口，才能实现跨域通信2、JSONP：a，只获取请求，不能postb,dataType:"jsonp",jsonp:"jsoncallback"c,先在客户端注册一个回调，然后把回调名传给服务端，服务端生成json数据，然后生成函数，函数用js语法的name是jsonp传上来的参数。最后直接将json数据作为参数输入，放在函数中，生成一个js语法文档返回给客户端。3.window.name：不同的页面/不同的域名依然存在4.document.domain将两个不同的页面设置为同一个域名，并设置为更高一级的父域5.location.hash子框有修改的hash值父框架的src6.window.postMessage:HTML5api允许两个窗口跨域发送信息解决dom跨域的通用方法结构当任何普通函数用于创建一类对象时，它被称为构造函数或构造函数ScopechainScope：变量和函数可访问的范围，或变量或函数工作的区域Scopechain：是一个对象列表，用于检索每个变量对象中的变量和函数，以确保执行环境有权访问这些变量和函数。(this,a,b,c),apply(this,arguments)立即执行，bind返回对应函数，稍后执行，null和undefined的区别需要手动执行，undefined事件冒泡，事件捕获和事件委托事件冒泡的意思是自底向上（由内向外）触发事件如何防止事件冒泡jq的e.stopPropagation事件捕获的意思是自上而下的（由外向外）事件委托的意思是只指定一个事件处理器，并将原始子元素上的处理程序委托给父元素执行。为什么要添加新的子元素，不需要添加事件，因为父元素已经绑定了如何做$('parent').on('click','li',function(e){})nativemethod赋值方法pop和pushpop从尾部删除一个元素push添加多个元素shift和unshiftshifthead删除一个元素unshifthead添加多个元素splice表示向数组中添加/删除项，并返回被删除项的位置参数index:的位置添加或删除的项howmany：要删除的项的个数item：新添加到数组中的项对数组中元素进行倒序排序对数组元素进行倒序排序。访问方法concat用于连接两个或多个数组并返回一个新数组。join用于将数组中的所有元素拼成一个字符串，即通过索引位置指定分隔符来分隔切片。newarray不会修改数组，只会返回一个新的子数组toString，将其转换为字符串forEach从右到左迭代的方法，遍历map并遍历filterfilter，过滤掉数组的部分元素，然后每次都返回剩余的元素。从迭代开始，一旦有不满足条件的，就停止一些一直在寻找匹配条件的值，找到就停止reduce和reduceRightreduce从左到右升序（累加）reduceRight从右到左降序（累加）数据类型NullNumberStringBoolenUndefinedjs设计模式模块模式构造器模式混合模式工厂模式单例模式发布订阅模式js占位显示色块（有点preloaded)js的遍历for耗时23-24ms,break,continue,return支持for...in耗时4858msfor...of耗时480-485msforEach耗时209ms,break,continue,return不支持使用性能测试工具4.ES6var、let和const赋值的基本语法var声明变量，可以有变量提升函数，函数级作用域let声明变量，块级作用域const声明常量解构意思是允许遵循一定的模式，从数组中提取对象中的值并分配和解构分配的类型数组[a,b,c,d]=[1,2,3,4]//a=1,b=2,c=3,d=4object{foo,bar}={foo:'aaa',bar:'bbb'}//foo='aaa',bar='bbb'string[a,b,c,d,e]='hello'//a=h,b=e,c=l,d=l,e=o数值和布尔值let{toString:s}=123;//s===Number.prototype.toString;函数参数functionadd([x,y]){returnx+y;};添加（[1,2]）；//3箭头函数this指向外层使用callapplybind，this指绑定对象Set去重Set是New数据结构，成员的值是unique[...set]Array.from(newSet(array))集合结构数组新增数据类型Symbol含义表示唯一值Symbol值由Symbol函数生成用途1、用作属性名``模板字符串如何实现继承ClassInheritanceModularityPromise含义Objectconstructorresolve表示成功Callbackreject表示failure回调方法promise.all需要多个异步请求一起成功才能返回成功promise.race只返回第一个完成的异步操作的async/await含义必须是方法外层的async异步函数await必须先执行异步操作才能执行下一步用法内置执行器返回Promise5.html和css基础知识块级元素和内联元素块级元素div/h1/li/ul/p/th/td内联元素a/b/input/span/i/img如何实现水平和垂直居中1.position:absolute;左：50%；顶部：50%；变换：翻译（-50%，-50%）；2。位置：绝对；左上右下：0；margin:auto;3、position:absolute;顶部：50%；左：50%；边距顶部：-25px；//高度的一半margin-left:-25px;//一半宽度显示：无；和可见性：隐藏；区别显示//不占用空间隐藏可见性//占用隐藏clearfloat1、添加子元素伪元素选择器2、overflow:hidden;第一个框设置margin-bottom，第二个框设置margin-topcss属性继承文本相关属性：font-family/font-size/font-style/line-height/text-align/color列表相关属性：list-style表格相关属性：border-spacing其他属性：cursor/visibilitystatic/relative/absolute/fixed的区别1、静态默认值，如果不设置属性，则按照正常的文档流向移动2、relative相对定位，relative相对于自身的位置3、absolute绝对定位，可能是相对于父元素的relative/absolute定位，也可能是相对body定位4.固定定位对象是根据浏览器窗口来定位的。link和@import之间的区别在于HTML标记。兼容性，样式权重高@import为css加载，页面加载后加载，IE5及以上可识别，低于linkBFC意为块级格式化上下文，块级元素布局渲染规范创建BFCfloat不无位置值Notstatic/relativedisplayvalueisinline-block,table-cell,flex,table-caption,inline-flexoverflowvalueisnotvisibleIE6bug图片有borderbug解决方法：给图片border:0;或边框：无；双边距解决方案：显示：内联；默认高度解决方案：font-size:0;或溢出：隐藏；button元素默认大小不一致解决方法：一个label模拟六、不同浏览器兼容浏览器margin和padding不同解决方法：清除label默认样式*{margin:0;填充：0；IE6doublemargin问题解决了：display:inline;标签高度设置小于10px，在IE6、IE7会超过自己设置的高度解决：overflow:hidden;orline-height小于默认高图片有spacing解决：floatlayoutIE9cannotuseopacity解决：opacity:0.5;过滤器：alpha（不透明度=50）；过滤器：progid：DXImageTransform.Microsoft.Alpha（样式=0，不透明度=50）；margin重叠问题解决：给子元素添加一个父元素，设置overflow:hidden;cursor:handonsafaridoesnotsupport解决方法：统一使用cursor:pointer；7、HTTP状态及请求常见状态码200成功，一切正常302重定向304未修改403服务器禁止访问404请求的资源未找到500服务器错误http流程1.建立连接2.客户端向server3.服务器返回相应的信息：状态行，协议版本好，成功或者错误码4,客户端接收到服务器返回的信息显示在用户的显示屏上，然后断开连接http方法GET到获取数据POST传输数据PUT传输文件HEAD获取消息头DELET删除文件OPTIONS查询对应URL支持的HTTP方法8.项目vue1遇到的问题，兼容IE10：组件babel-polyfill2，在线资源图片打包后路径地址不对：修改cofig/index.public路径。程序视图标签html,css1,keyboardblockingtheinputboxblocking:csscontrolscrollingpageCopyright?KENExcellence
