工作时遇到一个小问题,当在一个方法中先清空table的值,再赋值,这个时候vue只渲染了一遍,原本以为vue会在清空完渲染一遍,赋值后渲染一遍.用beforeUpdate 与 updated打印一看,发现只执行了一次;

   axios.get().then((res)=>{
   
     this.tableData = [];
   
     console.log(this.tableData); //此时值已为空
   
     this.tableData = res.data;
   })

修改后

   this.tableData = [];
   
   axios.get().then((res)=>{

     console.log(this.tableData) //此时值已为空
   
     this.tableData = res.data;
   
   })

或修改为

   axios.get().then((res)=>{
   
     this.tableData = [];

     console.log(this.tableData) //此时值已为空
   
     setTimeout(() => {
     this.tableData = res.data;
     },50)
   
   })

beforeUpdate 与 updated执行2遍,先清空完渲染一遍,赋值后又渲染一遍;

百度后了解了一些 Vue的 dom更新机制,才搞明白上面.

主要vue实现响应式 并不是在数据发生变化之后DOM立即发生变化,而是按照一定的策略进行DOM更新,
vue在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成以后,再同意进行视图更新.
同步里执行的方法,每个方法里做的事情组成一个事件循环,接下来再次调用的是另一个事件循环.

上面第一个例子是因为清空与赋值都是一个事件循环,所以会在赋值完以后再渲染.
第二个例子与第三个例子是因为上面清空结束后,下面的是一个事件循环,在请求之前就已经结束了上面的事件循环,所以渲染了2遍.