nextTick源码分析:MutationObserver和MessageChannel

时间:2021-1-8 作者:admin

为什么要用nextTick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
</head>
<body>
<div id="app">
    <div v-if="isShow">
        <input type="text" ref="userName" />
    </div>
    <button @click="showInput">点击显示输入框</button>
</div>

</body>
</html>
<script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610187565.684181.jpg"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods:{
            showInput(){
                this.isShow = true
                this.$refs.userName.focus()
            }
        }

    })
</script>

运行结果是报错,找不到节点。也就是说,当你执行到isShow=true时,此时dom节点尚未更新,只能等待dom更新后,你才能执行下面的focus。

用MessageChannel实现

<!DOCTYPE html>

<html lang="en-zh">
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="app">
      <div v-if="isShow">
          <input type="text" ref="userName" />
      </div>
      <button @click="showInput">点击显示输入框</button>
    </div>
  </body>
</html>

<script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610187565.684181.jpg"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isShow: false
    },
    methods: {
      showInput(){
        this.isShow = true;
        this.myNextTick(() => {
          this.$refs.userName.focus();
        })
      },
      myNextTick(fanc){
        var that = this;
        const ch = new MessageChannel();
        const port1 = ch.port1;
        const port2 = ch.port2;

        port2.onmessage = (() => {
          fanc();
        })
        port1.postMessage(1);

      }
    }
  })
</script>

用MutationObserver实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
</head>
<body>
<div id="app">
    <div v-if="isShow">
        <input type="text" ref="userName" />
    </div>
    <button @click="showInput">点击显示输入框</button>
</div>

</body>
</html>
<script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610187565.684181.jpg"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods:{
            showInput(){
                this.isShow = true
                this.mynextTick(()=>{
                    this.$refs.userName.focus()
                })

            },
            mynextTick(func){
                var textNode = document.createTextNode(0)//新建文本节点
                var that = this
                var callback = function(mutationsList, observer) {
                    func.call(that);
                    // 或
                    // fanc();
                }
                var observer = new MutationObserver(callback);

                observer.observe(textNode,{characterData:true })
                textNode.data = 1//修改文本信息,触发dom更新
            }
        }

    })
</script>

为何弃用MessageChannel使用MutationObserver

vue2中在2018年12月20号用MutationObser替换了MessageChannel(有很多博客说是相反的,但查git上的时间线是这样的),把2个都使用下对比便知结果:

因为MutationObserver是宏任务,MessageChannel是微任务,比它先执行,选用它肯定考虑了这部分因素。

<!DOCTYPE html>

<html lang="en-zh">
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="app">
      <div v-if="isShow">
          <input type="text" ref="userName" />
      </div>
      <button @click="showInput">点击显示输入框</button>
    </div>
  </body>
</html>

<script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610187565.684181.jpg"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isShow: false
    },
    methods: {
      showInput(){
        this.isShow = true;
        this.myNextTick1(() => {
          this.$refs.userName.focus();
        })
        this.myNextTick2(() => {
          this.$refs.userName.focus();
        })
      },
      myNextTick1(fanc){
        var that = this;
        const ch = new MessageChannel();
        const port1 = ch.port1;
        const port2 = ch.port2;

        port2.onmessage = (() => {
          console.log('1')
          fanc();
        })
        port1.postMessage(1);

      },
      myNextTick2 (fanc) {
        var that = this;
        var textNode = document.createTextNode('0');
        var callback = function(mutationList, observer){
          console.log('2')
          fanc();
        }
        var observer = new MutationObserver(callback);
        observer.observe(textNode, {characterData: true});
        textNode.data = 1;
      }
    }
  })
</script>

打印出来:

2
1

并不是按顺序执行,而是先宏任务MutationObserver,再微任务MessageChannel。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。