一、vue的基础知识
vue实现双向绑定原理
- 1、Object.defineProperty()中的set/get设置属性值/获取属性值
2、过程
Observer劫持并监听所有属性
- 发生变化，通知Dep观察者（update函数）
- Watcher负责向观察者列表添加对应更新函数
- Compile编译解析
- 初始化/更新
vue生命周期
beforeCreate
- data和methods中的数据和方法还没初始化
created
- data和methods初始化完成
beforeMount
- 模板已经在内存编译好了，尚未挂载到页面
mounted
- 页面挂载完成，可以操作DOM
beforeUpdate
- 页面数据是旧的，data数据是新的，页面和最新数据还没同步
updated
- 页面和data已经保持最新
beforeDestory
- 进入销毁阶段，data、methodes…还可用
destroyed
- 组件已经完全销毁，data、methods以及过滤器，指令不可用
vue组件通信
父子通信
- 父组件绑定属性“：data-attr”数据
- 子组件在props接收驼峰式dataAttr数据
子与父通信
- 子组件$emit(‘to-parent’,newMsg)绑定属性传输数据
- 父组件绑定@to-parent=”getChildren(e)”属性接收数据
兄弟通信
- 在main.js建立一个Vue.prototype.bus事件总线（中间层）
- 在borther1，this.bus.$emit(‘属性toborther2’，值)
- 在borther2接收，this.bus.$on(‘toborther2’,function(val){ that.msg = val })
vue的虚拟DOM
- 虚拟DOM出现是为了减少频繁大面积的重绘引发的性能问题
虚拟dom和真实dom的区别
- 1、虚拟dom不会排版与重绘 2、真实dom频繁排版与重绘效率相当低 3、虚拟dom进行频繁修改，然后一次性比较并修改真实dom中需要改的部分，最后并在真实dom中进行排版与重绘，减少过多dom节点排版与重绘损耗 4、虚拟dom有效降低大面积的重绘与排版，因为最终与真实dom比较差异，可以只渲染局部
DOM Diff
- 指的是通过Diff算法去比较虚拟DOM的变化
vue怎么更新节点
- 1、先根据真实DOM生成virtual DOM 2、当virtual DOM某个节点的数据改变后会生成一个新的Vnode 3、Vnode和oldVnode作对比，发现有不一样的就直接修改在真实的DOM，然后使oldVnode的值为Vnode
路由
全局路由拦截(路由守卫)
router.beforeEach(( to, from, next )=>{}) //跳转前
- to: 即将进入的目标（路由对象）
- from:当前导航正要离开的路由
- next()进行下一个钩子，next(false)中断当前导航，如果此时URL改变，则会重置为from后的路由地址， next(‘/’) next(path: ‘/’)终止当前导航，跳转到一个不同的地址，next(error)如果参数为一个error实例，则会终止导航
- beforeResolve(( to, from, next )=>{}) //跳转成功
- afterEach(( to, from, next )=>{}) //跳转后
局部路由拦截
- 路由内部钩子： beforeEnter(( to, from, next )=>{})
组件内部钩子
- beforeRouteEnter(( to, from, next )=>{}) //从另外的组件进入该组件前触发该钩子
- 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 } })
- this.$router.push({ path:
vuex
- state定义共享变量
- mutations同步修改共享变量（更改state,提交mutation）
- actions可以提交mutation,action中执行store.commit
- getter计算属性
如何解决单页面的SEO问题
- prerender-spa-plugin
SSR
定义
- 服务端渲染，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼接，组合成完整的html页面，再直接返回给浏览器
优势
- 1、更好的SEO，由于搜索引擎爬虫抓取工具可以查看渲染页面
- 2、更快内容到达时间，特别对于缓慢的网络情况或缓慢的设备
劣势
- 1、构建设置和部署的更多要求
- 2、更多服务器端负载
- Nuxt.js
二、微信小程序基础
目录
app.js
- 系统的方法处理文件，主要处理程序声明周期的一些方法
app.json
- 路由地址、全局配置，导航头颜色、名称
app.wxss
- 全局界面样式
project.config.json
- 控制小程序版本，appid
sitemap.json
- 用来配置小程序及其页面是否允许被微信索引
pages
- 小程序各个页面文件
components
- 组件
images
- 图片
template
- 模板
生命周期
页面生命周期
onLoad
- 监听页面加载
onShow
- 监听页面显示
onReady
- 监听页面初次渲染完成
onHide
- 监听页面隐藏
onUnload
- 监听页面卸载
app生命周期
onLaunch
- 监听小程序初始化，只触发一次
onShow
- 监听小程序显示
onHide
- 监听小程序隐藏
onError
- 错误监听函数
路由
wx.switchTab
- 跳转到tabBar页面，并关闭其他所有非tabBar页面
wx.reLaunch
- 关闭所有页面，打开应用内某个页面
wx.redirectTo
- 关闭当前页面，跳转到应用内某个页面，不允许跳tabbar页面
wx.navigateTo
- 保存当前页面，跳转到应用内某个页面，不能跳到tabbar页面，最多十层页面栈
wx.navigateBack
- 关闭当前页面，返回上一页或多级页面
页面传递数据的方法
url参数传递
- 1、wx.navigateTo({ url: ‘../list/list?username=’ + this.data.username }) 2、wx.redirectTo 3、wx.reLaunch
本地缓存
- wx.setStorageSync(‘username’,this.data.username)
全局变量
- appjs里面app.globalData对象中新建属性
基本原理
双线程通信方式
view视图层：渲染页面结构
- 1、初始化状态
- 2、首次渲染状态
- 3、持续渲染状态
- End
- 通过JSBridage通信
AppService逻辑层：用来逻辑处理、数据请求、接口调用
- 1、初始化状态：onLoad(只执行一次)、onShow（每次切换都会执行）
- 2、等待激活状态：接收到“界面线程初始化完成”信号，讲初始化数据发送到“界面线程”，等待界面线程完成初始渲染
- 3、激活状态：首次渲染完成，调用onReady函数
- 4、后台状态：也能接收数据，局部渲染
- End
虚拟DOM
- 1、js对象模拟DOM
- 2、比较两个DOM树
- 3、比较两个DOM树的差异
- 4、把差异应用到真正的DOM树上
数据请求封装
在utils封装wx.request请求
- 组件中引入应用
提高应用速度方法
- 提高页面加载速度
- 用户行为预测
- 减少默认data的大小
- 组件化方案
双向绑定
- this.setData({})
- bindinput绑定事件方法，监听变化
三、js基础知识
原型、原型链
函数对象
- 所有函数prototype（显式原型）
- 函数、数组、对象都拥有__proto__（隐式原型）
- 原型对象，拥有prototype属性的对象，在定义函数时就被创建
构造函数
- 构造函数会拥有本身方法，也会拥有显式原型的方法，即实例继承构造函数的方法
原型链（查找属性，在__proto__中查找，通过__proto__形成原型链）
- prototype
- proto
- constructor
继承
含义
- 发生在对象与对象之间
方法
原型
- 构造函数（子构造函数prototype继承父构造函数的原型方法）
apply,call借调构造函数
- 例：
function Fn(name,age){
this.name = name;
this.age = 20;
}
function Son(name,age,sex){
Fn.call(this,name,age);
this.sex = sex;
}
function Son2(name,age,sex){
Fn.apply(this,arguments);
this.sex = sex;
}
var s1 = new Son("李四",20,“男”);
console.log(s1); // son:{ name:"李四",age: 20,sex:"男" }
var s1 = new Son2("张三",29,“女”);
console.log(s2); //son:{ name: "张三"，age:29,sex:"女"}
闭包
含义
- 就是能读取其他函数内部变量的函数
作用
好处
- 1、保护函数内的变量 安全，防止命名冲突
- 2、内存维持一个变量，可以做缓存
- 3、匿名自执行函数可以减少内耗
坏处
- 1、增大内耗，造成内存泄漏
- 2、闭包跨域访问，导致性能损失
跨域
含义
- 协议、域名、端口有一个不同就是跨域
解决跨域
- 1、CORS跨源通信：浏览器和服务器同时支持，浏览器IE不能低于IE10，前端正常ajax请求，需要服务器实现CORS接口，就可以实现跨域通信
- 2、JSONP：a、只能get请求，不能post b、dataType:”jsonp”, jsonp: “jsoncallback” c、先在客户端注册一个callback,然后把callback名字传给服务器，服务器生成json数据，然后以js语法方式生成function,function名字就是传递上来的参数jsonp.最后将json数据直接入参的方式，放置到function,生成一段js语法文档，返回给客户端
- 3、window.name：不同页面/不同域名 仍然存在
- 4、document.domain将两个不同页面设置成相同练=的域名，设置成更高的父域
- 5、location.hash子框架具有修改父框架src的hash值
- 6、window.postMessage：HTML5的api允许两个窗口跨域发送信息，解决dom跨域通用方法
构造函数
- 任意一个普通函数用于创建一类对象时，称为构造函数或构造器
作用域链
- 作用域：变量和函数可访问范围，或者说变量或函数起作用的区域
- 作用域链：是一个对象列表，用来检索各个变量对象中的变量和函数，这样可以保证执行环境有权访问那些变量和函数
cal、 apply、bind的区别
- 相同：改变this指向，作用一样
- 不同：接收的参数不一样，call(this,a,b,c),apply(this,arguments)立即执行，bind是返回对应函数，稍后执行，需要手动执行
null和undefined的区别
- null是空值，类型为object
- undefined表示“缺少值”，未定义
事件冒泡、事件捕获和事件委托
事件冒泡
含义
- 自下而上（自内而外）的触发事件
如何防止事件冒泡
- jq的e.stopPropagation
事件捕获
含义
- 自上而下（自外而内）的触发事件
事件委托
含义
- 只指定一个事件处理程序，将原本子元素上的处理程序委托给父元素执行
为什么
- 新增子元素，不需添加事件，因为已经绑定父元素
怎么做
- $(‘parent’).on(‘click’,’li’,function(e){ })
原生方法
赋值方法
pop和push
- pop从尾部删除1个元素
- push增加若干元素
shift和unshift
- shift头部删除1个元素
- unshift头部增加若干元素
splice
含义
- 向数组中添加/删除项目，并返回被删除的项目
参数
- index:添加或删除项目的位置
- howmany:要删除的项目的数量
- item:向数组添加的新项目
reverse
- 将数组中元素顺序反转
sort
- 将数组元素进行排序
访问方法
concat
- 用于连接两个或多个数组，返回新数组
join
- 用于把数组中的所有元素放入一个字符串，即指定分隔符进行分隔
slice
- 通过索引位置获取新的数组，不会修改数组，只会返回新的子数组
toString
- 将其转换为字符串
indexOf和lastIndexOf
- indexOf返回指定字符串首次出现的位置（从左往右）
- lastIndexOf返回指定字符串首次出现的位置（从右往左
迭代方法
forEach
- 遍历
map
- 遍历
filter
- 过滤器，把数组的某些元素过滤掉，然后返回剩下的元素
every和some
- every从迭代开始，一旦有一个不符合条件的则停止
- some一直在找符合条件的值，找到就停止
reduce和reduceRight
- reduce升序从左往右（累加器）
- reduceRight降序从右往左（累加）
数据类型
- Null
- Number
- String
- Boolen
- Undefined
js设计模式
- 模块模式
- 构造函数模式
- 混合模式
- 工厂模式
- 单例模式
- 发布-订阅模式
js的占位显示色块（有点预加载的意思）
js的遍历
for
- 耗时23-24ms,break,continue,return支持
for…in
- 耗时4858ms
for…of
- 耗时480-485ms
forEach
- 耗时209ms，break,continue,return不支持使用
性能测试工具
四、ES6的基本语法
var、let和const赋值
- var 声明变量，可有变量提升作用，函数级作用域
- let 声明变量，块级作用域
- const声明常量
解构
含义
- 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
解构赋值的类型
数组
- [a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4
对象
- {foo,bar} = {foo: ‘aaa’,bar: ‘bbb’} //foo=’aaa’, bar = ‘bbb’
字符串
- [a,b,c,d,e] = ‘hello’ //a=h,b=e,c=l,d=l,e=o
数值和布尔值
- let {toString: s} = 123; //s === Number.prototype.toString;
函数参数
- function add([x, y]){ return x + y; }; add([1,2]); //3
箭头函数
- this指向外层
- 使用callapplybind，this指的是绑定的对象
Set去重
- Set是新的数据结构，成员的值是唯一的
- […set]
- Array.from(new Set(array)) Set结构数组化
新增数据类型Symbol
含义
- 表示独一无二的值
- Symbol值通过Symbol函数生成
用途
- 1、用作属性名
“模板字符串
怎么实现继承
- Class继承
模块化
promise
含义
对象构造函数
- resolve表示成功回调
- reject表示失败回调
方法
promise.all
- 要多个异步请求一起成功才返回成功
promise.race
- 只返回第一个执行完成的异步操作结果
async/await
含义
- 在方法外层必须 async异步函数
- await必须执行完异步操作，才会执行下一步
用法
- 内置执行器
- 返回Promise
五、html与css基础知识
块级元素和内联元素
块级元素
- div/h1/li/ul/p/th/td
内联元素
- a/b/input/span/i/img
如何实现水平垂直居中
- 1、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);
- 2、position: absolute; top bottom left right:0; margin:auto;
- 3、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height的一半 margin-left: -25px; //宽的一半
display:none;和visibility:hidden;区别
- display//不占位隐藏
- visibility//占位隐藏
清除浮动
- 1、添加子元素伪元素选择器
- 2、overflow: hidden;第一个盒子设置margin-bottom,第二个盒子设置margin-top
css属性继承
- 文本相关属性：font-family / font-size / font-style / line-height / text-align / color
- 列表相关属性：list-style
- 表格相关属性：border-spacing
- 其他属性：cursor / visibility
static/relative/absolute/fixed的区别
- 1、static默认值，不设置属性，会按正常的文档流
- 2、relative相对定位，相对它本身的位置
- 3、absolute绝对定位，可能是相对父元素的relative/absolute定位，也有可能是相对body定位
- 4、fixed定位对象是根据浏览器窗口进行定位
link和@import区别
- link是html标签，页面加载时，link会同时被加载，没兼容性，样式权重高
- @import是css加载，会等页面加载后才加载，IE5以上才能识别，比link低
BFC
含义
- 块级格式化上下文，块级元素的布局渲染规范
创建BFC
- float不是none
- position值不是static/relative
- display值是inline-block,table-cell,flex,table-caption,inline-flex
- overflow值不是visible
IE6的bug
图片有边框bug
- 解决：给图片border:0;或者border:none;
双倍边距
- 解决：display:inline;
默认高度
- 解决：font-size:0;或者overflow:hidden;
按钮元素默认大小不一致
- 解决：a标签模拟
六、浏览器兼容性
不同浏览器margin和padding不同
- 解决：清除标签默认样式 *{ margin: 0; padding: 0; }
IE6双边距问题
- 解决：display:inline;
标签高度设置小于10px,在IE6和IE7会超出自己设置的高度
- 解决：overflow:hidden;或line-height小于高
图片默认有间距
- 解决：float布局
IE9不能使用opacity
- 解决：opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);
边距重叠问题
- 解决：给子元素增加父元素，父元素设置overflow:hidden;
cursor: hand在safari上不支持
- 解决：统一使用cursor:pointer;
七、HTTP的状态及请求
常见状态码
- 200 成功，一切正常
- 302 重定向
- 304未修改
- 403服务器禁止访问
- 404找不到请求的资源
- 500服务器错误
http流程
- 1、建立连接
- 2、客户端发送请求到服务器
- 3、服务器返回相应信息：状态行、协议版本好、成功或错误代码
- 4、客户端接收服务器返回信息显示在用户显示屏，然后断开链接
http方法
- GET获取数据
- POST传输数据
- PUT传输文件
- HEAD获取报文首部
- DELET删除文件
- OPTIONS查询相应URL支持的HTTP方法
八、项目遇到的问题
vue
- 1、兼容IE10：组件babel-polyfill
- 2、打包后线上资源图片路径地址不对：修改cofig/index.js配置文件公共路径
微信小程序
- 1、富文本html在小程序不兼容：用wxParse组件编译成功小程序view标签
html、css
- 1、键盘挡住输入框挡住：css控制滚动页面
Copyright © KEN卓越
