后话
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。
console.log(‘nextTick回调:’, this.$refs.firstBtn.innerText); // => ‘最后更新’
});
// 也可以作为一个 Promise 使用, 即不传回调
this.$nextTick().then(() => {
console.log(‘nextTick作为Promise:’, this.$refs.firstBtn.innerText); // => ‘最后更新’
});
// 想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
console.log(‘直接获取:’, this.$refs.firstBtn.innerText); // => ‘未更新’
console.log(‘啥也不干,就是玩。’);
},
},
};
复制代码
点击按钮,打印出来的结果为:
直接获取: 未更新
啥也不干,就是玩。
nextTick回调: 最后更新
nextTick作为Promise: 最后更新
复制代码
从以上例子可以发现:
-
我们多次更改了testMsg的值,但最终只能拿到
this.testMsg = '最后更新'
; -
在更改之后直接获取DOM数据的时候,因为此时DOM还没有更新,所以只能拿到更新前的DOM数据
未更新
-
无论是在
nextTick
回调函数还是then函数中的方法,都会在当前方法内所有同步代码执行完毕之后再执行,然后就能拿到更新后的DOM数据了
这是什么原因呢?
原理
JS运行机制(Event Loop)
JS事件循环(Event Loop)
JS执行是单线程的,它是基于事件循环的。
-
所有同步任务都在主线程上执行,形成一个执行栈。
-
主线程之外,会存在一个任务队列,只要异步任务有了结果,就在任务队列中放置一个事件。
-
当执行栈中的所有同步任务执行完后,就会读取任务队列。那些对应的异步任务,会结束等待状态,进入执行栈。
-
主线程不断重复第三步。
这里主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。Event Loop 分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick,并在两个tick之间进行UI渲染。
Vue更新策略
同样,Vue 是异步执行 DOM 更新的。更新过程如下:
-
一旦观察到数据变化,Vue 就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。
-
如果这个 watcher 被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和 DOM 操作。
-
而在下一个事件循环时,Vue 会清空队列,并进行必要的 DOM 更新。
所以,当你设置 this.testMsg = '再次更新';
时,DOM 并不会马上更新,即使你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变。而在异步队列被清空后,也就是下一个事件循环开始时执行更新时才会进行必要的 DOM 更新。
因此,为了确保得到更新后的DOM,所以设置了 Vue.nextTick()
; 可以在数据变化之后立即使用 Vue.nextTick(callback)
,这样回调函数 callback
在 DOM 更新完成后就会调用。
二、Vue.nextTick() 应用场景 应用场景")
需要在视图更新之后,基于新的视图进行操作。
1. 初始化绑定或操作DOM
在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染,同样mounted() 不会承诺所有的子组件也都一起被挂载。而此时进行 DOM 操作无异于徒劳,所以如果你希望等到整个视图都渲染完毕, 一定要将 DOM 操作的 js 代码放进 Vue.nextTick()
的回调函数中。
created() {
// 不使用this.$nextTick()方法会报错
that.$nextTick(() => {
that.$refs.firstBtn.innerHTML = “created 中更改了按钮内容”; //写入到 DOM 元素
});
}
复制代码
2. 获取数据更新的DOM
当项目中你想在改变 DOM 元素的数据后基于新的 DOM 做点什么,比如获取v-if控制的DOM节点。必须放进 Vue.nextTick()
的回调函数中.
{{ message }}
<button @click=“getMyWidth”>获取p元素宽度
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行,此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?