为什么Vue采用异步渲染呢?
==============
答案
Vue 是组件级更新,如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以为了性能, Vue 会在本轮数据更新后,再异步更新视图。核心思想 nextTick 。
dep.notify() 通知 watcher进行更新, subs[i].update 依次调用 watcher 的 update , queueWatcher 将watcher 去重放入队列, nextTick( flushSchedulerQueue )在下一tick中刷新watcher队列(异步)。
接着追问,要是你nextTick都能讲得很清楚的话那基本你是明白了。
了解nextTick吗?
============
答案
异步方法,异步渲染最后一步,与JS事件循环联系紧密。主要使用了宏任务微任务(setTimeout、promise那些),定义了一个异步方法,多次调用nextTick会将方法存入队列,通过异步方法清空当前队列。
可以的可以的,先问你个生命周期,我再想想怎么难住你
说说Vue的生命周期吧 ❗
=============
答案
什么时候被调用?
-
beforeCreate :实例初始化之后,数据观测之前调用
-
created:实例创建完之后调用。实例完成:数据观测、属性和方法的运算、 watch/event 事件回调。无 $el .
-
beforeMount:在挂载之前调用,相关 render 函数首次被调用
-
mounted:了被新创建的vm.$el替换,并挂载到实例上去之后调用改钩子。
-
beforeUpdate:数据更新前调用,发生在虚拟DOM重新渲染和打补丁,在这之后会调用改钩子。
-
updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用改钩子。
-
beforeDestroy:实例销毁前调用,实例仍然可用。
-
destroyed:实例销毁之后调用,调用后,Vue实例指示的所有东西都会解绑,所有事件监听器和所有子实例都会被移除
每个生命周期内部可以做什么?
-
created:实例已经创建完成,因为他是最早触发的,所以可以进行一些数据、资源的请求。
-
mounted:实例已经挂载完成,可以进行一些DOM操作。
-
beforeUpdate:可以在这个钩子中进一步的更改状态,不会触发重渲染。
-
updated:可以执行依赖于DOM的操作,但是要避免更改状态,可能会导致更新无线循环。
-
destroyed:可以执行一些优化操作,清空计时器,解除绑定事件。
ajax放在哪个生命周期?:一般放在 mounted 中,保证逻辑统一性,因为生命周期是同步执行的, ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中,因为服务端渲染不支持 mou