数据更新后的vm.$el和vm.$el.textContent

怼怼
  • 37

关于更新数据和获取最新DOM时令我费解的问题

  • 在改变数据后,vm.$el是更新后的内容,而$el.textContent是更新前的内容
  • 同样的$refs也是更新后的内容,而提取$refs返回的具体元素则又是更新前的内容
<template>
  <div>
    <ul ref="ulEl">
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <input type="button" value="添加" @click="add" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: ["0", "1"],
    };
  },
  methods: {
    async add() {
      //批量添加数据
      this.list.push(Math.random());
      this.list.push(Math.random());

      //获取元素
      const ulElem = this.$refs.ulEl;

      console.log(this.$el);//4个li
      console.log(this.$el.textContent);//01
      console.log(ulElem);//4个li
      console.log(ulElem.childNodes.length);//2
      
      await this.nextTick();
      console.log(ulElem.childNodes.length); //4
    },
  },
  beforeUpdate(){
      console.log(this.$el)//4个li
  }
};
</script>
  • 还有就是vm.$nextTick()与updated(),它们的调用有没有的严格的顺序
当数据发生改变时,虚拟DOM和真实DOM是怎么变化的,在这个变化的过程中,$refs和$el获取到的是什么,$nextTick调用前后发生了什么
回复
阅读 469
1 个回答
✓ 已被采纳

https://jsbin.com/xeheducine/...,console,output
这个问题是因为对象打印在控制台时是当前快照,当对象内部在打印之后发生变化后,会反应出控制台展开对象时也更改了

所以要么就将对象序列化后再看,要么只打印值类型

你知道吗?

宣传栏