动态组件&$nextTick

一、动态组件

vue.js提供了一个特殊的元素用来动态地挂在不同的组件，使用is特性来选择要挂载的组件，示例代码如下

<div>
  <components :is="currentView"></components>
  <button @click="change()"></button>
</div>
<script>
export default{
  components: {
    compA,
    compB
  },
  data() {
    return {
      currentView : "comA"
    };
  },
  methods: {
    change() {
      this.currentView = "compB"
    }
  }
}
</script>

二、$nextTick

vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环呢中发生的所有数据改变。在缓冲时会去除重复数据，从避免不必要的计算和DOM操作。然后在下一个事件循环tick中，vue刷新队列辩执行实际工作。$nextTick用来知道什么时候DOM更新完成

this.$nextTick(function() {
  console.log(document.getElementById("div").innnerHTML);
});