vue
- $set(defineReative)
- #delete
1,组件通信
- 事件总线
vue.prototype.$bus = new Vue() this.$bus.on() =this.$bus.emit() - provide/inject
- $refs
- parent/children
- props/$emit
- vuex
vue扩展组件 vue.extend 组件挂载 $mount
2,slot
父申明东西想在子组件中显示 父中template对应子里的slot 子 <layout> <slot></slot> </layout>
3,自定义指令
Vue.directive('focus',{ inserted(el) { el.focus() } })
- bind 绑定到元素时只调用一次
- inserted 插入到父节点时
- update unbind
el: Dom元素 渲染函数：render: () => {return createElement()}
4,router
- $router: vueRouter实例 包含路由的跳转
- $route: path name query
- hash: hashChange history: pushState replaceState popState
5,proxy
new Proxy(obj, handler)
需要我们在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。
6,nextTick
在更新dom后的微任务或红任务追加自己的回调 setTimeout(() => {xxxxx})
7,vuex
- state
- mutations(commit)
- action(dispatch)
- getter
8, 双向绑定
object.definePorperty
- getter(name1) -> watcher1 ->Dep(管理watcher)
- setter ->Dep ->watcher1 ->updater(更新函数)
9，diff
oldStart oldEnd newStart newEnd 深度优先 同级比较 patch虚拟dom转真实dom
10，key
no key: someNode 标签和内容是否一样，不一样就强制更新到当前节点 key 标签属性和key相同，patch时认为是同一个，就不会更新，（oldStart oldEnd newStart newEnd）只会新增一个节点并进行插入操作
11，优化
- 路由懒加载
- keep-alive
- v-show 复用dom v-if会反复创建和销毁组件
- 图片懒加载
- 某块模块经常更新，抽成组件就不用全更新当前组件
12，生命周期
- beforeCreate 注入校验/数据 添加观察者
- created 可以访问data
- beforeMount
- mounted 真实Dom
- beforeDestory 销毁Timer
- destoryed
13，keep-alive
缓存组件状态 只会执行created-mounted-actived-deactived
JS
1,Array
改变数组本身的7个方法： pop push shift unshift splice sort reverse
2,call apply bind
apply（【】） call(arg1,arg2,...)是立即执行函数 bind返回对应函数
3,ajax
- new xmlHttpRequest
- open(option(get/post), url)
- send()
- onReadyStateChange()
4,map
- set get delete size
- key: 可以是函数，对象，字符串
- Set 无序 不重复 delete/has
5,node
- commonJs(export require) ES6:import export
- const http = require('http');
- server = http.createServer((req, res) => { res.end(123) });
- server.listen(8000)
核心API：URL（search, hash）
- queryString
- events (on, emit)
- fs (readFile writeFile)
- path (join)
- http
6,继承
- 原型 B.protoType = new A()
- 构造方法继承 function B() { A.call(this, arg) }
- class A extends B
- 拷贝继承 B.protoType[key] = new A([key])
7，async
返回一个promise，一旦await，先返回，在执行剩下的
genarator *
8,缓存
- 强缓存 expires cache-control
- 协商缓存 Etag/if-none-match > Last/modified 带上协商缓存的标志去问服务器
9，防抖
- 防抖 n秒只执行一次 期间触发，清楚再重新计算时间
if(!timer) setTimeout(xxx) - 节流 连续触发 但 n秒中只执行一次
let flag = true if(!flag) return; setTimeOut(()=>{ flag = true; })
10,懒加载的条件 A.offset.top =< window.height + window.scrollTop
11,箭头函数的this
申明时的指向
##HTML + CSS3
1,
- text-shadow
- border-radius
- 过渡 transition：css属性 时间 曲线效果
- 动画 animation: 动画名称 时间；
- 形状转换 transform:适用于2D或3D转换的元素等旋转移动
