事件循环机制:
同步代码,微任务,dom渲染,宏任务
1.同步代码执行完毕,清空调用栈(call stack)
进入事件循环(event loop)
2.执行微任务 promise as
3.触发Dom渲染
4.执行宏任务 setimeout ajax
await 后面接 Promise .then
接报错,就用try catch去接await
await 下面的代码相当于 微任务
async function fn
try
await
catch(e)
e.message
手写代码:
Array.prototype.myForEach = function (fn, thisValue) {
if (typeof fn !== 'function') {
throw new Error(`${fn} 不是一个函数`)
}
if ([null, undefined].includes(this)) {
throw new Error(`this 是null 或者 undefined`)
}
const arr = Object(this)
for (let i = 0; i < arr.length; i++) {
fn.call(thisValue, arr[i], i, arr)
}
}
Array.prototype.myMap = function (fn, thisValue) {
if (typeof fn !== 'function') {
throw new Error(`${fn} 不是一个函数`)
}
if ([null, undefined].includes(this)) {
throw new Error(`this 是null 或者 undefined`)
}
// 在非严格模式下使用改变this指向都会包装成一个对象,但在严格模式下则不会包装
const arr = Object(this)
let res = []
for (let i = 0; i < arr.length; i++) {
res[i] = fn.call(thisValue, arr[i], i, arr)
}
return res
}
forEach()返回值是undefined,不可以链式调用
map()返回一个新数组,原数组不会改变
手写bind call apply
Vue
v-if v-show区别
频繁切换 用vshow
vif会真正的渲染和销毁
为何在vfor 中用key
必须要用key 且不能是index和random
diff算法中通过tag和key来判断,是否是same Node
减少渲染次数,提升渲染性能
!!!Vue组件生命周期父子关系
vue组件如何通讯
父子组件props和this.$emit
自定义事件?
vuex
!!!描述组件渲染和更新的过程
大图
初次渲染
解析模板为render函数
触发响应式,监听data属性 getter setter
执行render 函数,生成vnode,执行patch(el,vnode)
更新过程
修改data 触发setter
重新执行render 函数,生成new vnode
再去执行patch(vnode,newvnode)递归算法
异步渲染
$nextTick
数据改变,但是异步渲染,diff算法的作用就是,把所有变化,统计后再一并操作dom
!!!双向数据绑定vmode的实现原理
对mvvm理解
computed有何特点
1.产生新数据 缓存
2.watch 监听数据
3.method 不缓存
为何组件data必须是一个函数
组件是一个class
ajax请求应该放在那个生命周期
mounted
js 单线程的
如何将组件所有props传递给子组件?
$props
!!!如何自己实现vmodel
多组件有相同的逻辑,如何抽离
mixin和缺点
何时要使用异步组件
加载大组件
路由异步加载
何时需要使用keep alive
缓存组件,不需要重复渲染
如多个静态tab页面的切换
优化性能
何时需要使用before Destory
解除自定义事件 event $off
清除定时器
解绑自定义的DOM事件,如window scroll
什么是作用域插槽
vuex中的action 和 mutation 有何区别
Vue router 常用路由模式
hash 默认
h5history 需要服务端支持
如何配置vue-router异步加载
请用vnode描述一个dom结构
监听data变化api
vue如何监听数组变化
响应式原理
diff 算法的时间复杂度
vue 常见性能优化
试题100
箭头函数 this arguments
缺点:
没有argument s对象
call bind apply 也不能改变this
复杂的逻辑,读起来比较难懂
5个不适用
1.对象方法
2.构造函数 实例对象丢失this
3.原型方法 —proto—
4.动态绑定的上下文回调 侦听点击事件
5.vue 生命周期中 例如 methods中的方法
防抖节流
防抖:抖完再执行函数
输入完后再触发搜索
function denounce fn delay
let timer 0
return function
if timer
cleantimer timer
timer setimeout
fn.apply this arguments
timer 0
delay 最好给个默认值,免得使用时候,忘记写入
节流:固定时间内只执行1次
function thortor fn delay
let time 0
return function
if timer return
setimeout
fn.apply this arguments
timer 0
图片的拖拽,下拉操作等
垃圾回收机制(内存泄露)
理解:这是js引擎所做的事
例子:函数中的对象,对象的引用,闭包
引用计数 很早以前
对象还有没有被引用?循环引用是一个bug
标记清除
以根元素,开始遍历,看有没有使用到改对象的情况,没有就干掉它。
怎么检查
借用谷歌浏览器的功能,去观察内存的Head的变化曲线。
场景有哪些呢?结合vue来讲
全局应用,定时器,自定义事件需要在实例销毁的时候,清除一下引用。
怎么让才会触发垃圾回收机制机制
有个关键词:可达性