美文网首页
nextTick研究报告

nextTick研究报告

作者: WangChloe | 来源:发表于2018-10-08 17:35 被阅读111次

BLOG传送门

  • nextTick
    • es5源码
    • 关于setTimeout(fn,0)
  • 讨论点
  • 常用示例
    • 1.mounted时更新
      • console
    • 2.更改子组件更新时间
      • console
    • 3.同时更改父组件更新时间
      • console
    • 4.nextTick顺序问题
      • console
  • 总结

nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

vue这么做是因为频繁的更新dom是特别耗费性能的，所以搞了一个批处理更新，把所有的update操作放到任务队列中，等主线程中执行栈的所有同步任务执行完毕，系统就会读取任务队列。

es5源码

/**
 * Defer a task to execute it asynchronously.
 * 异步更新队列
 */
var nextTick = (function() {
    var callbacks = [];
    var pending = false;
    var timerFunc;

    function nextTickHandler() {
        pending = false;

        var copies = callbacks.slice(0);
        callbacks.length = 0;
        for (var i = 0; i < copies.length; i++) {
            copies[i]();
        }
    }

    // 只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
    // 如果同一个 watcher 被多次触发，只会被推入到队列中一次。
    // 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。
    // 然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
    // Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
    timerFunc = function() {
        setTimeout(nextTickHandler, 0);
    };

    return function queueNextTick(cb, ctx) {
        var _resolve;
        callbacks.push(function() {
            if (cb) {
                try {
                    cb.call(ctx);
                } catch (e) {
                    handleError(e, ctx, 'nextTick');
                }
            } else if (_resolve) {
                _resolve(ctx);
            }
        });
        if (!pending) {
            pending = true;
            timerFunc();
        }
    }
})();

Vue.prototype.$nextTick = function(fn) {
    return nextTick(fn, this)
};

关于setTimeout(fn,0)

理解 JavaScript 中的 macrotask 和 microtask

JavaScript 主线程拥有一个 执行栈 以及一个 任务队列，主线程会依次执行代码，当遇到函数时，会先将函数 入栈，函数运行完毕后再将该函数 出栈，直到所有代码执行完毕。

  • macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
  • microtasks: process.nextTick, Promises, Object.observe(废弃), MutationObserver

在每一次事件循环中，macrotask 只会提取一个执行，而 microtask 会一直提取，直到 microtasks 队列清空。

讨论点

  • 父组件nextTick的触发在子组件DOM完成前还是完成后？

常用示例

codepen示例

  • DOM
<div id="J_app">
    <h3>{{title}}</h3>
    <item></item>
</div>

1.mounted时更新

  • 父组件
(function() {
    var app = new Vue({
        el: "#J_app",
        data: {
            title: "父组件"
        },

        beforeCreate: function() { // 实例初始化之后
            console.log("父组件beforeCreate");
        },
        created: function() { // 实例创建完成之后被调用
            console.log("父组件created");
        },

        beforeMount: function() { // 在挂载开始之前被调用
            console.log("父组件beforeMount");
        },

        beforeUpdate: function() { // 数据更新时调用
            console.log("父组件beforeUpdate");
        },

        updated: function() { // 数据更新之后调用
            console.log("父组件updated");
        },

        mounted: function() { // el被新创建的vm.$el替换，挂载到实例上
            var that = this;

            console.log("父组件mounted");

            this.$nextTick(function() {
                console.log("父组件nextTick");
                console.log("当前页面content:" + that.$el.textContent);

            });

            that.title = "父组件更新";
            console.log("父组件更新");
            console.log("当前页面content:" + that.$el.textContent);
        }
    });
})();
  • 子组件
(function() {
    var tpl = "<h4>{{subtitle}}</h4>";

    Vue.component('item', {
        data: function() {
            return {
                subtitle: "子组件"
            }
        },
        props: [],
        template: tpl,
        beforeCreate: function() { // 实例初始化之后
            console.log("子组件beforeCreate");
        },
        created: function() { // 实例创建完成之后被调用
            console.log("子组件created");
        },

        beforeMount: function() { // 在挂载开始之前被调用
            console.log("子组件beforeMount");
        },

        beforeUpdate: function() { // 数据更新时调用
            console.log("子组件beforeUpdate");
        },

        updated: function() { // 数据更新之后调用
            console.log("子组件updated");
        },
        mounted: function() { // el被新创建的vm.$el替换，挂载到实例上
            var that = this;

            console.log("子组件mounted")

            this.$nextTick(function() {
                console.log("子组件nextTick");
                console.log("当前页面content:" + that.$el.textContent);
            });

            that.subtitle = "子组件更新";
            console.log("子组件更新");
            console.log("当前页面content:" + that.$el.textContent);
        }
    });
})();

console

父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
子组件更新
当前页面content:子组件
父组件mounted
父组件更新
当前页面content:父组件 子组件
子组件nextTick
当前页面content:子组件
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updated
父组件nextTick
当前页面content:父组件更新 子组件更新
image

nextTick写在数据更改前不能拿到更新后的数据。

2.更改子组件更新时间

(function() {
    var tpl = "<h4>{{subtitle}}</h4>";

    Vue.component('item', {
        data: function() {
            return {
                subtitle: "子组件"
            }
        },
        props: [],
        template: tpl,
        beforeCreate: function() { // 实例初始化之后
            console.log("子组件beforeCreate");
        },
        created: function() { // 实例创建完成之后被调用
            console.log("子组件created");
        },

        beforeMount: function() { // 在挂载开始之前被调用
            console.log("子组件beforeMount");
        },

        beforeUpdate: function() { // 数据更新时调用
            console.log("子组件beforeUpdate");
        },

        updated: function() { // 数据更新之后调用
            console.log("子组件updated");
        },
        mounted: function() { // el被新创建的vm.$el替换，挂载到实例上
            var that = this;

            console.log("子组件mounted")

            this.$nextTick(function() {
                console.log("子组件nextTick");
                console.log("当前页面content:" + that.$el.textContent);
            });

            setTimeout(function() {
                that.subtitle = "子组件更新";
                console.log("子组件更新");
                console.log("当前页面content:" + that.$el.textContent);
            }, 1000);
        }
    });
})();

console

父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
父组件mounted
父组件更新
当前页面content:父组件 子组件
子组件nextTick
当前页面content:子组件
父组件nextTick
当前页面content:父组件 子组件
父组件beforeUpdate
父组件updated

子组件更新
当前页面content:子组件
子组件beforeUpdate
子组件updated
image

若子组件在mounted即更新，子组件的update动作会在父组件的beforeUpdate之后updated之前执行。
反之则更新后子组件自己执行update，并且由于父组件nextTick写在数据更改之前，导致先执行父组件nextTick再执行父组件的update动作。

3.同时更改父组件更新时间

(function() {
    var app = new Vue({
        el: "#J_app",
        data: {
            title: "父组件"
        },

        beforeCreate: function() { // 实例初始化之后
            console.log("父组件beforeCreate");
        },
        created: function() { // 实例创建完成之后被调用
            console.log("父组件created");
        },

        beforeMount: function() { // 在挂载开始之前被调用
            console.log("父组件beforeMount");
        },

        beforeUpdate: function() { // 数据更新时调用
            console.log("父组件beforeUpdate");
        },

        updated: function() { // 数据更新之后调用
            console.log("父组件updated");
        },

        mounted: function() { // el被新创建的vm.$el替换，挂载到实例上
            var that = this;

            console.log("父组件mounted");

            this.$nextTick(function() {
                console.log("父组件nextTick");
                console.log("当前页面content:" + that.$el.textContent);

            });

            setTimeout(function() {
                that.title = "父组件更新";
                console.log("父组件更新");
                console.log("当前页面content:" + that.$el.textContent);
            }, 1000);
        }
    });
})();

console

父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
父组件mounted
子组件nextTick
当前页面content:子组件
父组件nextTick
当前页面content:父组件 子组件

子组件更新
当前页面content:子组件
子组件beforeUpdate
子组件updated
父组件更新
当前页面content:父组件 子组件更新
父组件beforeUpdate
父组件updated
image

若父、子组件的更新延时相同，则会各自执行各自的update动作，子组件优先。

4.nextTick顺序问题

nextTick应写在数据更改后

  • 父组件
(function() {
    var app = new Vue({
        el: "#J_app",
        data: {
            title: "父组件"
        },

        beforeCreate: function() { // 实例初始化之后
            console.log("父组件beforeCreate");
        },
        created: function() { // 实例创建完成之后被调用
            console.log("父组件created");
        },

        beforeMount: function() { // 在挂载开始之前被调用
            console.log("父组件beforeMount");
        },

        beforeUpdate: function() { // 数据更新时调用
            console.log("父组件beforeUpdate");
        },

        updated: function() { // 数据更新之后调用
            console.log("父组件updated");
        },

        mounted: function() { // el被新创建的vm.$el替换，挂载到实例上
            var that = this;

            console.log("父组件mounted");

            that.title = "父组件更新";
            console.log("父组件已更新");
            console.log("当前页面content:" + that.$el.textContent);

            this.$nextTick(function() {
                console.log("父组件nextTick");
                console.log("当前页面content:" + that.$el.textContent);
            });
        }
    });
})();
  • 子组件
(function() {
    var tpl = "<h4>{{subtitle}}</h4>";

    Vue.component('item', {
        data: function() {
            return {
                subtitle: "子组件"
            }
        },
        props: [],
        template: tpl,
        beforeCreate: function() { // 实例初始化之后
            console.log("子组件beforeCreate");
        },
        created: function() { // 实例创建完成之后被调用
            console.log("子组件created");
        },

        beforeMount: function() { // 在挂载开始之前被调用
            console.log("子组件beforeMount");
        },

        beforeUpdate: function() { // 数据更新时调用
            console.log("子组件beforeUpdate");
        },

        updated: function() { // 数据更新之后调用
            console.log("子组件updated");
        },
        mounted: function() {
            var that = this;

            console.log("子组件mounted")

            that.subtitle = "子组件更新";
            console.log("子组件已更新");
            console.log("当前页面content:" + that.$el.textContent);

            this.$nextTick(function() {
                console.log("子组件nextTick");
                console.log("当前页面content:" + that.$el.textContent);
            });
        }
    });
})();

console

父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
子组件已更新
当前页面content:子组件
父组件mounted
父组件已更新
当前页面content:父组件 子组件
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updated
子组件nextTick
当前页面content:子组件更新
父组件nextTick
当前页面content:父组件更新 子组件更新
image

如果子组件nextTick写在数据更改前，则会在父组件mouted之后beforeUpdate之前执行nextTick。实际应在updated之后执行nextTick，这样nextTick才能拿到最新的数据。

  • 推荐在updated中执行$nextTick
updated: function() { // 数据更新之后调用
    var that = this;

    console.log("组件updated");
    this.$nextTick(function() {
        console.log("组件nextTick");
    });
}

总结

  • 父组件nextTick的触发在子组件updated后。

  • 若子组件在mounted即更新，子组件的update动作会在父组件的beforeUpdate之后updated之前执行。反之则更新后子组件自己执行update，不会影响父组件的nextTick。

  • 若父、子组件的更新延时相同，则会各自执行各自的update动作，子组件优先。

  • nextTick都需写在各自组件的updated之后。

相关文章

网友评论

      本文标题：nextTick研究报告

      本文链接：https://www.haomeiwen.com/subject/knpjaftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|nextTick研究报告|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！