[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结

this.$nextTick()原理：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
然后Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

vue的降级策略（兼容）
promise -> MutationObserver ->（macro-task） setTimeout
创建一个新的任务，优先使用 Promise，如果浏览器不支持，再尝试 MutationObserver。又不支持，只能用 setTimeout 创建 task 了。

MutationObserver 是 h5 新加的一个功能，其功能是监听dom节点的变动，在所有 dom 变动完成后，执行回调函数。

具体有下面几点变动的监听：

childList：子元素的变动
attributes：属性的变动
characterData：节点内容或节点文本的变动
subtree：所有下属节点（包括子节点和子节点的子节点）的变动

this.$nextTick()使用情景：

created 和 mounted 阶段，如果需要操作渲染后的视图，要使用 nextTick 方法。因为mounted不会承诺其子组件也挂载完毕
通过v-show切换到输入框后，自动聚焦用得到。
点击获取某个元素的style样式时用得到

[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结相关推荐

[vue] 你知道nextTick的原理吗？
[vue] 你知道nextTick的原理吗? 提到DOM的更新是异步执行的,只要数据发生变化,将会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更.如果同一个 watcher 被多次触发,只会被 ...
Vue中的$nextTick有什么作用？
Vue中的$nextTick有什么作用? 官方定义在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM 什么意思呢? 我们可以理解成,Vue 在更新 D ...
vue中路由的实现原理？
vue中路由的实现原理? 1.首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带'#'号的,其实对地址栏也就不怎么美观一点.其次是history路由也就是URL不带'#' ...
vue中this.$nextTick()使用解析
原理 vue中数据和dom渲染由于是异步的,所以要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中. this.$nextTick 作用是可以将回调延迟到下次DO ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
vue中this.$nextTick()的使用---SpringCloud Alibaba_若依微服务框架改造_ElementUI---工作笔记017
this.$nextTick(() => {this.isUpdateTable = true;; }) 可以看到在vue中我们使用,更新一些变量的时候,用了这个this.$nextTick函数 ...
vue中路由实现的原理？
一.概念通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
Vue中的$nextTick
如果面试官问你,怎么样实现一个网站切换皮肤的方案呢? 以前想的是直接用一个配置文件配置几种状态,然后用js根据配置文件设置一下就好了. 面试官回:这只是一个大概思路的,不够具体,你能说一下具体细节吗? ...
vue中的 SPA 与 SSR 的使用场景以及element-UI、Nuxt.js 的使用
1. SSR 的应用场景 SPA 页面内容是在浏览器中(客户)渲染,搜索引擎不友好互联网(公众,天猫,京东,静态化 --- SSR )企业应用(内网,没有 SEO 需求,不需要 SSR)SSR---静 ...

[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结

[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结相关推荐

最新文章

热门文章