基础知识总结

js 和 ts 的区别

ts 可以使用 class 且可以继承。也可以使用 interface。强类型,IDE 更好的支持,语法题是和编译报错信息。 接口和继承,让代码更容易维护
js 是弱语言,编辑器检测不出拼写错误,ts 可以进行类型检测

vue 响应式原理

总结: vue 采用数据劫持结合发布-订阅者模式实现响应式,当数据改变,依赖变化,发布消息给订阅者,触发响应的监听回调。
data 数据通过 object.definePropot 拥有 getter,setter 方法。getter 收集数据的依赖,当依赖变化,setter 方法进行派发更新。watcher(监听者个实例了 dep 并向 dep.subs 中添加订阅者,dep 通过 notify 遍历 subs 通知每个 watcher 更新。

js 原型

每个函数都有一个 propoty 属性,这个属性指向一个原型对象,原型对象的构造函数属性又指向这个函数的指针,原型对象可以有其他的属性和方法。
当实例化函数时,器实例有一个内部属性指向这个函数的实例对象。修改实例的属性(同名)并不会改变原型对象的属性。

es6 常用功能

class、字符串模板、let 变量、箭头函数(没有 this,其中的 this 指向上下文)、解构、扩展运算付(…)、promise

vue 的生命周期

beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestory、destory

vue 路由钩子

全局钩子

1
2
3
router.beforeEach(to, from, next)
router.beforeResolve(to, from, next)
router.afterEach(to, from, next)

组件钩子

1
2
3
beforeRouteEnter(to, from, next)
beforeRouteUpdate(to, from, next)
boforeRouteLeave(to, from, next)

局部钩子

1
beforeEnter  ????

路由之间的跳转: 声明式跳转(a 标签)、编程式跳转(js router.push())

params 和 query 的区别: 前者匹配的 path 指向路由对象中 name 属性,链接形式如 a/b:123 后者路由对象的 name 属性、path 属性都行,链接形式如 a/b/c

vuex 的属性

state、getter、mutation、action、module
this.store.commit(mutation, value) 同步修改 state 的属性值
this.store.dispatch(action, value) 异步操作
module 模块划分

react 的生命周期

getDefaultProps、getInitialState、componentWillMount、render、componentDidMount、componentWillReceveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate、componentWillUnMount、componentDidCatch

react hook

react 16.8 后的特性,补充了无状态组件(函数组件)不能使用有状态组件(class 组件)中 state 以及生命周期的缺点,函数组价不用 new 实例,性能优于 class 组件
还可以进行状态跨组价共享

react 高阶组件

输入一个组件,返回一个新组件的函数

jq 获取的 dom 对象和 js 获取的 dom 对象(原生)相互转换

js 对象 var jsDom = getElementById(“id”);
jq 对象 var jqDom = $(“#id”);

var jsDom2 = jqDom[0]/ jqDom.get(0) // jq 转 js
var jqDom2 = $(jsDom) // js 转 jq

js 对象序列化以及解析 json 字符串

一般我们会使用 json 格式与后台进行数据传输,是因为 json 数据与 js 对象方便转换、json 数据传输也比较快

var json = JSON.stringify(js)
var js = JSON.parse(josn)

js 对象与 json 的区别:json 数据的属性必须是字符创,带了双引号””

ajax 对象请求数据的过程, 局部刷新数据,提升性能

原生 js 中使用 XMLHTTPRequest 对象请求后台接口,进行数据交互
分为五步: 未初始化 0 : 还没有调用 open 方法, 启动 1 : 调用 open 方法没有调用 send 方法, 发送 2 : 调用 open 方法, 响应 3 : 接收服务器部分响应数据, 完成 4 :响应成功
判断成功获取数据: respond.readyState == 4 && respond.status == 200

ljlhnick wechat
subscribe to my blog by scanning my public wechat account
Donate comment here