[Vuejs]-In Vue, which has a higher priority, manually changing the DOM content or updating the DOM content through virtual DOM?

by

0👍

✅

I think I’ve figured out what’s going on here:

When dom.textContent = '30' is executed, it changes the element’s text content to ’30’.

But it’s not like what I thought before, which directly modifies the textContent of the dom element’s Text child node to the new content. Instead, it generates a new Text child node and replaces the original one.

Later, in the $nextTick function, Vue uses the newest msg value, which is now 4, to update the Text node’s content. However, the Text node Vue is using now is the one that stored in the el property, which is the old one, not the updated dom element’s Text child node. As a result, this change is useless, and both the page and the console.log statement fail to show the expected result.

After change the demo code into the following version, I finally get what I want:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const vue = new Vue({
      el: '#root',
      template: '<div><div id="dom">{{msg}}</div><button @click="add">add</button></div>',
      data() {
        return {
          msg: 1
        }
      },
      watch: {
        msg(value) {
          console.log('msg>>>>>', value);
        }
      },
      methods: {
        add() {
          const dom = document.getElementById('dom');
          dom.childNodes[0].textContent = '30'; //change dom's child node's textContent, not dom's own textContent; 
          for(let i = 0; i < 3; i ++) {
            this.msg ++
          }
          this.$nextTick(() => {
            console.log('msg.content2>>>>>>', dom.textContent)
          })
        }
      }
    })
  </script>
</html>

live demo

another demo:
change div’s textContent creates a new Text node

Leave a comment