概念系列
🚂

概念系列

Created
Mar 10, 2022 01:13 PM
Tags
前端
简介
事件循环机制:
同步代码,微任务,dom渲染,宏任务
1.同步代码执行完毕,清空调用栈(call stack)
进入事件循环(event loop)
2.执行微任务 promise as
3.触发Dom渲染
4.执行宏任务 setimeout ajax
await 后面接 Promise .then
接报错,就用try catch去接await
await 下面的代码相当于 微任务
notion image
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
notion image
notion image

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来讲
全局应用,定时器,自定义事件需要在实例销毁的时候,清除一下引用。
怎么让才会触发垃圾回收机制机制
有个关键词:可达性