nextTick研究报告

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

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

nextTick

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

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

es5源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/**
 * 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
1
2
3
4
<div id="J_app">
	<h3>{{title}}</h3>
	<item></item>
</div>

1.mounted时更新

  • 父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(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);
        }
    });
})();
  • 子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
子组件更新
当前页面content:子组件
父组件mounted
父组件更新
当前页面content:父组件 子组件
子组件nextTick
当前页面content:子组件
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updated
父组件nextTick
当前页面content:父组件更新 子组件更新

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

2.更改子组件更新时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
父组件mounted
父组件更新
当前页面content:父组件 子组件
子组件nextTick
当前页面content:子组件
父组件nextTick
当前页面content:父组件 子组件
父组件beforeUpdate
父组件updated

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
父组件mounted
子组件nextTick
当前页面content:子组件
父组件nextTick
当前页面content:父组件 子组件

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

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

4.nextTick顺序问题

nextTick应写在数据更改后

  • 父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(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);
            });
        }
    });
})();
  • 子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
子组件已更新
当前页面content:子组件
父组件mounted
父组件已更新
当前页面content:父组件 子组件
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updated
子组件nextTick
当前页面content:子组件更新
父组件nextTick
当前页面content:父组件更新 子组件更新

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

  • 推荐在updated中执行$nextTick
1
2
3
4
5
6
7
8
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之后。

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true